环境配置
.env.development # 开发环境
.env.production # 生产环境
我们需要在两个环境变量文件中配置
VUE_APP_BASE_API = '/dev' # 这里配置全局的API前置标识 开发环境我使用的/dev 生产环境用的是/prod
VUE_APP_BASE_URL = 'http://127.0.0.1:7000' # 这是基础BaseUri 主要给axios使用的
配置vue.config.js
devServer: {
port: port,
open: false,
overlay: {
warnings: false,
errors: true
},
// before: require('./mock/mock-server.js') 这是mockjs 在实际开发中前后端分离的场景可以使用,其他场景可以关闭
proxy: {
// 开发环境的标识
['/dev']: {
target: process.env.VUE_APP_BASE_URL,
changeOrigin: true,
ws: true,
secure: false,
pathRewrite: {
// 由于我们不需要接口帮我们拼接/dev/v1/api/** 可以在这里重写路径,选择追加或者不追加或者追加其他的前置path标识
["^" + process.env.VUE_APP_BASE_API]: ""
}
},
['/prod']: {
target: process.env.VUE_APP_BASE_URL,
changeOrigin: true,
ws: true,
secure: true,
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: ""
}
},
}
},
演示
- 开发环境
- 生产环境
为啥要这么做呢?
理论上我们本地打包后dist都是直接放在后台SpringBooot的resource/static目录下 启动项目可以直接访问,由于做的SpringCloud微服务,这里就把网关和后台管理给分开了,网关做统一转发,等于说网关是唯一如果,这时候我们在把dist放在resource/static目录下,就会造成资源不从网关中,通过proxy直接访问的是后台管理模块的IP和端口。