【记录】Vue配置开发/生成环境、跨域代理配置
【【记录】Vue配置开发/生成环境、跨域代理配置】一、项目根目录建立 .env 系列文件.env.developent
模式用于 serve,开发环境,开始环境的时候会引用这个文件中的配置;
.env.production
模式用于 build,线上环境。
二、配置文件
1、开发环境
VUE_APP_BASE_API = '/dev-api' //可自由更改
2、生产环境
VUE_APP_BASE_API = '/produce-api' //可自由更改
三、axios 封装中配置
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 60000 // 超时
})
四、vue.config.js 文件中配置跨域代理
module.exports = {
devServer: {
host: '0.0.0.0',
open: true,
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: '目标地址',
changeOrigin: true,
pathRewrite: {
[`^${process.env.VUE_APP_BASE_API}`]: ''
}
}
},
disableHostCheck: true
}
}
注意点:api 接口不再需要拼接地址
//配置前:
export const getLogin = (data) => post(`${url}/auth/login`,data);
//配置后:
export const getLogin = (data) => post('/auth/login',data);
推荐阅读
- 宽容谁
- 我要做大厨
- 增长黑客的海盗法则
- 画画吗()
- 20170612时间和注意力开销记录
- 2019-02-13——今天谈梦想()
- 远去的风筝
- 三十年后的广场舞大爷
- 叙述作文
- 20190302|20190302 复盘翻盘