vue-cli3.0代理和环境变量
2019-04-25 本文已影响0人
并入高黄
在根目录下创建 vue.config.js 文件
配置代理
module.exports = {
devServer: {
port: 9999, // 配置端口
proxy: {
'/api': {
target: 'http://192.168.2.89:7001/', // 目标 API 地址
ws: true, // 是否代理 websockets
changOrigin: true, // 跨域配置
pathRewrite: {
'^/api': '/'
}
}
}
},
lintOnSave: false // 取消 eslint 验证
};
配置环境变量
在一个产品的前端开发过程中,一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境,然后才能正式的发布。对应每一个环境可能都会有所差异,比如说服务器地址、接口地址、websorket地址…… 等等。在各个环境切换的时候,就需要不同的配置参数,所以就可以用环境变量和模式,来方便我们管理。
1. 在根目录新建 .env(配置) 文件
# 反向代理配置
VUE_APP_API_SERVER = http://192.168.2.89:7001/
2. 更改vue.config.js 配置
module.exports = {
devServer: {
port: 9999, // 配置端口
proxy: {
'/api': {
target: process.env.VUE_APP_API_SERVER, // 目标 API 地址
ws: true, // 是否代理 websockets
changOrigin: true, // 跨域配置
pathRewrite: {
'^/api': '/'
}
}
}
},
lintOnSave: false // 取消 eslint 验证
};
process官方给出的解释是:process 对象是一个全局变量,它提供有关当前 Node.js 进程的信息并对其进行控制。 作为一个全局变量,它始终可供 Node.js 应用程序使用,无需使用 require()。