vue項目中的.env環境變量配置文件

開始之前，先說下為什么要設置和讀取環境變量

簡而言之就是，通過環境變量傳參，能讓我們在不修改任務代碼的情況下執行不同的邏輯。比如在開發環境、測試環境、生產環境的api地址、文件地址等不同，通過環境變量的不同設置不同的api地址、文件地址

 

 關於.env 文件內容：

　　NODE_ENV 代表是環境 有development （開發環境）、production（生產環境）

　　VUE_APP_FLAG 代表為自定義屬性，屬性名必須以"VUE_APP_"開頭，比如VUE_APP_XXX

 1：env.pro 文件  

NODE_ENV = 'production'
VUE_APP_FLAG = 'pro'

2：env.test 文件

NODE_ENV = 'production'
VUE_APP_FLAG = 'test'

3、在package.json中設置環境執行命令

"scripts": {
    "serve": "vue-cli-service serve",
    "pro": "vue-cli-service build --mode pro",
    "test": "vue-cli-service build --mode test",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
  },

4：應用config.js

let baseUrl = '';
let pdfUrl = '';
let wsUrl = '';
const env = process.env.NODE_ENV;
const flag = process.env.VUE_APP_FLAG;
console.log('process.env', process.env);
console.log('env', env);
console.log('flag', flag);

if (env == 'production') {
　　// 打包的生產環境
  if (flag == 'test') {
    // 測試環境
    baseUrl = 'http://192.168.1.129:8081/center/';
    pdfUrl = 'https://file.runshihua.com/files/c'; // 文件地址
    wsUrl = 'ws://119.136.17.18:8081/';
  } else {
    // 生產環境
    baseUrl = 'http://119.136.17.18:8081/center/';
    pdfUrl = 'https://file.runshihua.com/files/c'; // 文件地址
    wsUrl = 'ws://119.136.17.18:8081/';
  }
} else { // 開發環境
  baseUrl = 'http://119.136.17.18:8081/center/'; // 開發
  pdfUrl = 'https://file.runshihua.com/files/c'; // 文件地址
  wsUrl = 'ws://119.136.17.18:8081/';
}
export {
  baseUrl,
  pdfUrl,
  wsUrl
};

 4：在axios的請求攔截處映入接口api就完成api隨環境配置而改變。