react脚手架常见配置
一、配置代理:
-
简单版配置:
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脚手架的配置代理后,在请求资源时会优先请求前端资源,若没有再请求后端资源。
二、配置路径别名:
1.下载 customize-cra 库:yarn add customize-cra
2.项目根目录下建立:config-overrides.js,内容如下:
const {addWebpackAlias} = require('customize-cra');
const { resolve } = require("path");
module.exports = override(
addWebpackAlias({
"@": resolve(__dirname, "src")
})
);
3.为了能让vscode依然能提示路径,项目根路径建立:jsconfig.json,内容如下:
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}