react create-react-app 使用@引入模块简化 简化相对路径写法
2023-09-27 14:21:17 时间
解决方式一
1、查看项目中是否含有config文件夹
2、如果项目中没有config文件夹,则执行 npm run eject命令
输入 y 然后回车就可以看到config文件夹了
3、打开 config 下的 webpack.config.js文件
找到resolve中的alias增加别名符号和对应的路径地址
5、重启项目
解决方式二
1、npm install react-app-rewired -D 或是 yarn add react-app-rewired -D
2、在 package.json文件里以下的命令
修改为
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired --max_old_space_size=10240 build", "test": "react-app-rewired test", "eject": "react-scripts eject" },
3、最后在根目录文件下,新建 “config-overrides.js” 文件,替换默认的路径配置
const path = require('path') function resolve(dir) { return path.join(__dirname, '.', dir) } module.exports = function override(config, env) { config.resolve.alias = { '@': resolve('src') } return config }
4、重启项目
解决方式三
引入craco
$ yarn add @craco/craco
修改package.json文件,将craco作为执行文件
/* package.json */
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
}
配置craco.config.js文件
- 在项目根目录创建一个 craco.config.js 用于修改默认配置。
/* craco.config.js */ module.exports = { // ... };
将js的根路径和你想要自定义的路径拼接起来
const path = require("path")//导入path模块 //定义函数resolve,将你想要自定义的路径和js的根路劲作拼接 const resolve = dir =>path.resolve(__dirname,dir)
在module.exports中添加webpack相关配置
module.exports = { webpack:{ alias:{ //名称:路径 "@":resolve("src") } } };
然后就成功了,这样就不不用使用inject命令也能自定义目录了
相关文章
- 原来CSS这样写是会让app崩溃的
- 专门针对音乐发烧友开发的5款App
- 【经典面试题】vue2、vue3、uni-app用法上有什么区别
- Flutter 点击两次退出app
- 手把手教你完成App支付JAVA后台-支付宝支付JAVA
- 看日志有没有 出现错误的字段 (如 crash ) 查找app闪退
- HBuilder X 中使用模拟器进行App开发
- 支付宝开发:错误代码 invalid-app-id 错误原因: 无效的AppID参数
- 随想录(一个android原生app的代码赏析)
- Android APP 登陆模块
- Android之使用picker打开相应的app
- 【云栖大会】阿里云移动云Apsara Mobile重磅发布 推出Cloud Native App全新研发范式
- 推荐一些学习类APP
- 判断app是否运行于前台的两个方法
- APP渗透—MobSF安全评估、frida、r0capture抓包
- 浏览器判断是否安装APP
- uni-app(微信小程序)连接HC系列蓝牙模块并进行双向通信采坑总结
- Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(一)
- React Native快速开发APP 开源项目:厕所在哪
- 各类ReactNative学习资源、开源App和组件