| 文章写时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': 'react-native-web', // Allows for better profiling with ReactDevTools ...(isEnvProductionProfile && { 'react-dom$': 'react-dom/profiling', 'scheduler/tracing': 'scheduler/tracing-profiling', }), ...(modules.webpackAliases || {}),}, 3修改如下，然后重启项目 alias: { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 'react-native': 'react-native-web', // Allows for better profiling with ReactDevTools ...(isEnvProductionProfile && { 'react-dom$': 'react-dom/profiling', 'scheduler/tracing': 'scheduler/tracing-profiling', }), ...(modules.webpackAliases || {}), // 文件路径别名 '@': path.resolve(__dirname, '../src'), '@view': path.resolve(__dirname, '../src/view'),}, 配置代理：
简单版配置：
package.json中直接添加："proxy": "http://localhost:4000" 完整版本配置：
(1).下载：yarn add http-proxy-middleware
(2).在src目录下创建：setupProxy.js，内容如下： const proxy = require('http-proxy-middleware') module.exports = function(app) { app.use( proxy.createProxyMiddleware('/api', { //带有api是需要转发的请求 target: 'http://localhost:4000', // 这里是服务器地址 changeOrigin: true,//值为布尔值, 为true时, 本地就会虚拟一个服务器接收你的请求并代你发送该请求, pathRewrite: {'^/api': ''} }) ) } 3.备注：react脚手架的配置代理后，在请求资源时会优先请求前端资源，若没有再请求后端资源。
到此这篇关于react脚手架配置路径别名的方法的文章就介绍到这了,更多相关react脚手架配置路径别名内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
28个JavaScript常用字符串方法以及使用技巧总结
源码揭秘为什么 Vue2 this 能够直接获取到 data 和 methods |
