env环境配置

(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配置