react如何快速设置文件路径别名

React是用于构建用户界面的JavaScript库，  起源于Facebook的内部项目，因为该公司对市场上所有 JavaScript MVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

由于webpack隐藏了配置文件需要先暴露出来，进入项目目录后在cmd中运行以下代码

npm run eject

你确定要退出吗？这种行为是永久的。
输入y 然后回车
运行结束后在项目文件夹中找到config文件夹

打开webpack.config.js

按下 Ctrl+f 查找 alias 找到配置项

配置一下映射，可以参照以下我的配置

alias: {
        "react-native": "react-native-web",
        ...(isEnvProductionProfile && {
          "react-dom$": "react-dom/profiling",
          "scheduler/tracing": "scheduler/tracing-profiling",
        }),
        ...(modules.webpackAliases || {}),
        // 配置文件别名,左边是别名右边是对应的路径
        "@": path.resolve(__dirname, "../src"),
        "@scss": path.resolve(__dirname, "../src/assets/scss"),
        "@images": path.resolve(__dirname, "../src/assets/images"),
        "@views": path.resolve(__dirname, "../src/views"),
        "@components": path.resolve(__dirname, "../src/components"),
      },

配置完成后重新启动一下项目就行了

到此这篇关于react如何快速设置文件路径别名的文章就介绍到这了,更多相关react文件路径别名内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 基于react项目打包css引用路径错误解决方案

    没有去修改create-react-app默认的配置文件 执行npm start 一切正常, 但是 npm run build 之后生成的打包文件只能在根目录访问 这样放在服务器目录就访问不到了 报错为 手动更改index.html的路径之后又报静态资源引入错误 报错 解决方案 解决: 在package.json下面增加"homepage": ".". 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • Nginx配置React项目Url后直接输入路由路径时报404问题的解决

    前言 如今react应用普遍,最近在配置react项目中遇到了一个问题,通过查找相关的资料终于找到了解决的方法,所以想着总结一下分享出来给有需要的朋友们,下面话不多说了,来一起看看详细的介绍吧. 发现问题 大家都知道,当我们写完项目后,要对项目进行部署,我的配置很简单 location /demo { root E:/; index index.html index.htm; } 这样配置的有一个问题,只能 http://localhost/demo/来访问. 如果想访问里面的其它界面如 htt

  • react如何快速设置文件路径别名

    react如何快速设置文件路径别名

    React是用于构建用户界面的JavaScript库,  起源于Facebook的内部项目,因为该公司对市场上所有 JavaScript MVC框架,都不满意,就决定自己写一套,用来架设Instagram的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. React 是一个用于构建用户界面的 JAVASCRIPT 库. React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook 的内部项目,用来架设 Instagra

  • React中用@符号编写文件路径实现方法介绍

    React中用@符号编写文件路径实现方法介绍

    目录 前言 安装craco 根路径下创建 craco.config.js 写文件路径 前言 无论是vue还是react开发,我们通常需要引入路径的便捷化配置,通常我们都会约定使用路径@作为根路径地址.如果是个人react开发的@路径简单配置 安装craco yarn add @craco/craco 根路径下创建 craco.config.js const path = require("path") module.exports = { webpack:{ alias:{ "

  • react脚手架配置路径别名的方法

    文章写时react版本16.13.1 1输入命令 npm run eject 在项目根目录下生成config目录 2在confilg下打开webpack.config.js文件找到如下位置 alias: { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 'react-native': 'reac

  • vue @ ~ 相对路径 路径别名设置方式

    vue @ ~ 相对路径 路径别名设置方式

    目录 @ ~ 相对路径 路径别名设置 项目设置src相对路径为@ 第一步 创建vue.config.js文件 第二步 添加代码 @ ~ 相对路径 路径别名设置 ./这是相对路径的意思,同级目录. ../上级目录. @/这是webpack设置的路径别名.在build/webpack.base.conf这个文件里面设置了@具体指的是什么 在build/webpack.base.conf里找到如下 resolve: {     extensions: ['.js', '.vue', '.json'],

  • Java 配置log4j日志文件路径 (附-获取当前类路径的多种操作)

    1 日志路径带来的痛点 Java 项目中少不了要和log4j等日志框架打交道, 开发环境和生产环境下日志文件的输出路径总是不一致, 设置为绝对路径的方式缺少了灵活性, 每次变更项目路径都要修改文件, 目前想到的最佳实现方式是: 根据项目位置自动加载并配置文件路径. 本文借鉴 Tomcat 的配置方式 "${catalina.home}/logs/catalina.out", 通过相对路径的方式设置日志的输出路径, 有其他解决方案的小伙伴, 请直接评论区交流哦

  • Django项目中动态设置静态文件路径的全过程

    Django项目中动态设置静态文件路径的全过程

    目录 前言 一.修改BASE_DIR: 二.修改模板文件路径(TEMPLATES中的DIRS的值): 三.修改国际化文件路径,由于LOCALE_PATHS默认不存在,需要自己在合适位置添加,如下图所示: 四.修改公共文件路径,如下图所示: 五.修改STATIC_ROOT文件路径,如下图所示: 六.修改多媒体路径,如下图所示: 总结 前言 Django项目需要在settings.py文件中设置各种文件的路径,例如:媒体文件(media)的路径.静态文件(static files)的路径.模板文件(

  • linux中快速列出文件列表的多种方法总结

    前言 最近在工作中碰到一个很棘手的问题,需要读取出ubuntu系统中某个目录下所有文件,由于服务器中存储的文件实在太多,导致此过程效率十分低下,动辄需要等待一个小时之久,还只是一个目录.于是如何快速获取文件列表便是这两天的头等大事,折腾半天找到一个较为快速的方法,记录如下,话不多说了,来一起看看详细的介绍吧. 多种实现方法 尝试了多种方法,有编程的和非编程的. 1.walk python的walk库能够递归的读取目录下所有文件,这个是最常规的方法,然而效率有些缓慢.实现很简单,不赘述. 2.os

  • Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析

    本文实例讲述了Yii2中设置与获取别名的函数(setAlias和getAlias)用法.分享给大家供大家参考,具体如下: 首先说说什么是别名. 在Yii中有很多的路径,在开发的过程当前我们也会使用一些路径.一般来说都需要使用绝对路径,但绝对路径都很长. 所以,为了方便的使用路径,可以在Yi中i给每个路径起个名称,这个名称就是别名. 别名的格式: 别名必须以"@"字符开头,别名中还可以包含"/".如("@www"为根别名,"@www/te

  • 易语言取文件路径的操作教程

    易语言开发环境的"横空出世",给沉寂已久的"编程江湖"带来了巨大反响.越来越多的编程爱好者加入了易语言编程的大潮中.在易语言编程中,我们可能会遇到很多问题.比如,易语言如何取文件路径,其实这个方法有多种,给大家讲解其中一种. 1.首先,准备好测试文件(文件随意),这里不强求使用某个文件,只是为了配合此次测试而已.这里,笔者就以一个txt文本文档为例吧. 2.然后,运行"易语言"主程序,在弹出的"新建工程"文件对话框中,选择&q

  • Minio设置文件链接永久有效的完整步骤

    Minio设置文件链接永久有效的完整步骤

    目录 前言 1.下载MinIO Client 2.运行MinIO Client 3.添加一个云存储服务 4.验证 5.policy命令 - 管理存储桶策略 总结 前言 minio分享文件的链接,最多支持分享七天 通过 MinIO客户端 管理存储桶策略的方式实现文件链接永久有效 1.下载MinIO Client 采用 Docker 方式 安装 拉取Docker稳定版镜像 docker pull minio/mc 2.运行MinIO Client docker run -it --entrypoin

随机推荐