前端小白的我,把 antd pro下载下来之后遇到的第一个问题就是这个。记下笔记
1- 不同环境配置不同
- 在项目的根目录下创建对应环境的配置文件,如开发环境 .env.dev,生产环境 .env.prod 等等。例如,.env.dev 的内容见下:
NODE_ENV = dev
ENV = 'dev'
# 这是 app请求的默认前端
VUE_APP_BASE_API = ''
# 前端的端口
PORT = '8000'
# 后端的URL,可定义多个
TARGET_1 = 'http://172.0.0.11:8088'
TARGET_2 = 'http://172.0.0.11:8099'
注意:代码中凡是用到配置文件中参数的都要改成和配置文件一样的值!如 vue.config.js中的const isProd = process.env.NODE_ENV === ‘prod’, NODE_ENV的值应该和 .env.prod中的一致!
- 不同环境执行不同命令,在 package.json中加入一下配置:
"scripts": {
"serve-dev": "vue-cli-service serve --mode dev",
"build-dev": "vue-cli-service build --mode dev",
"serve-prod": "vue-cli-service serve --mode prod",
"build-prod": "vue-cli-service build --mode prod"
},
2- 为不同后端配置多个代理
- 修改vue.config.js中配置
devServer: {
# development server port 8000
port: process.env.PORT,
# If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
proxy: {
'/api': {
target: process.env.TARGET_1, # 代理目标地址
ws: false, # 是否开启 websoket 服务
changeOrigin: true # 是否跨域访问
},
'/server/admin': {
target: process.env.TARGET_2,
changeOrigin: true,
pathRewrite: { '^/server': '' }, #最终请求时候忽略掉server
}
}
},