脚本宝典收集整理的这篇文章主要介绍了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': '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脚手架配置路径别名内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的react脚手架配置路径别名的方法全部内容，希望文章能够帮你解决react脚手架配置路径别名的方法所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。