(1)环境配置文件
.eny:代表了当前项目环境配置
.env.development:开发环境配置
.env.production:配置生产环境
.env.test:配置测试环境
// .env.development
VUE APP PROT =8889
VUE APP BASE_URL ="/api'
VUE_APP TITLE ="woniu"
VUE APP SERVER PATH ="http://127.0.0.1:4001"
// .env.production
VUE_APP_PROT = 9999
VUE_APP_BASE_URL ="/myapis”
VUE_APP_TITLE ="woniu"
环境变量的key必须是VUE_APP开头的。
(2)在封装请求的时候,将baseURL替换为环境变量
methods:{
async fetchData(){
//任何一个地方,获取系统环境变量
//Nodejs提供一个全局变量 process
// console.log(process.env);
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;
const res = await axios({
url:"/usersAD/getSearch",
method:"PoST",
data :{}
})
console.log(res)
}
}
在Node环境下面提供的全局变量process,可以直接使用
(3)在vue.config.js文件配置代理内容
const repacePath = "^" + process.env.VUE_APP_BASE_URL;
module.exports = {
devServer: {
port: Number(process.env.VUE_APP_PROT),
proxy: {
//配置代理服务器,webpack内置的
//当检测到路径包含了/api 进入代理服务器
//http://127.0.0.1:4001/api/usersAD/getSearch
[process.env.VUE_APP_BASE_URL]: {
target:process.env.VUE_APP.SERVER_PATH,
change0rigin: true,
//表达的意思就是将路径中/api,替换成空字符串
pathRewrite: {
[repacePath]: "",
},
},
},
},
};
根据不同的环境,读取不同配置,进行加载
如果是生产环境 npm run build 读取的是production配置