React的路径别名

简介: React的路径别名

通过安装customize-cra插件来实现
在根目录新建config-overrides.js

const {
  override,
  addWebpackAlias
} = require('customize-cra')
const path = require('path')

module.exports = override(
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
    '@components': path.resolve(__dirname, 'src/components'),
    '@views': path.resolve(__dirname, 'src/views'),
  })
)

修改package.json文件

 原本之前的
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
  },
修改之后
scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
  },

这边保存重启一下即可

相关文章
|
缓存 移动开发 资源调度
react-native 设置路径别名
没有设置路径别名之前代码是这样的: 路径相当冗长,看着就头疼。增加了路径别名之后,变成这样 心里清爽多了! 具体操作见下文,实操性强!
225 1
|
资源调度 前端开发 JavaScript
react项目的@路径配置
无论是vue还是react开发,我们通常需要引入路径的便捷化配置,通常我们都会约定使用路径@作为根路径地址。如果是个人react开发的@路径简单配置
334 0
react项目的@路径配置
|
JavaScript 前端开发
react项目如何设置ctrl+鼠标左键跳转到路径带@隐射的对应文件
react项目如何设置ctrl+鼠标左键跳转到路径带@隐射的对应文件
react项目如何设置ctrl+鼠标左键跳转到路径带@隐射的对应文件
|
1月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
204 0
|
1月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
43 0
|
1月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
42 0
|
1月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
45 0
|
1月前
|
前端开发 开发者
【第26期】一文读懂React组件编写方式
【第26期】一文读懂React组件编写方式
38 0
|
1月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
71 0
|
1月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
26 1