vuecli3 環境變量配置

原文連接：www.edik.cn/article/323

配置環境變量

1. 在根目錄添加.env文件，通用配置。
2. 在根目錄添加.env.local 文件，通用配置，與.env的區別是隻會在本地，該文件不會被git提交。
3. 在根目錄添加.env.[mode] 文件，配置對應某個模式下的配置,好比：.env.development來配置開發環境的配置。
4. 在根目錄添加.env.[mode].local文件，配置對應某個模式下的配置,與.env.[mode]的區別也只是會在本地生效，該文件不會被git提交。 在文件中，使用key=value的方式設置變量
   如：

BAE_URL='https://www.edik.cn'
VUE_APP_SECRET='secret'
複製代碼

環境變量的使用

1. 在項目中使用

即在src目錄下使用，變量名必須以 VUE_APP_ 開頭
在main.js中直接輸出一下命令 查看效果

前提：配置好對應的變量

console.log(process.env.BAE_URL)
console.log(process.env.VUE_APP_SECRET)
複製代碼

2.在webpack配置中使用

這個沒有限制，能夠直接經過process.env.XXX來使用

3.在index.html模板中使用

我暫時沒用到過使用場景，請本身摸索

<%= VAR %> 用於非轉換插值  例如：`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">`
<%- VAR %> 用於HTML轉義插值
<% expression %> 用於JavaScript控制流    
複製代碼

默認的三種模式

模式	對應npm命令	對應文件名稱
development	server	.env.development
production	build	.env.production
test	test	.env.test

注意： process.env.NODE_ENV爲默認變量，會自動設置爲上邊對應的模式名稱（test的我沒試過，請自行校驗）

自定義模式

現實老是殘酷的，默認的三種模式也許並不能知足咱們的全部使用場景，使用自定義模式能夠很好地解決這個問題。
咱們開始建立一個 alpha 模式

修改package.json

添加一行命令"alpha": "vue-cli-service build --mode alpha"
實際效果

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve", //本地開發運行，會把process.env.NODE_ENV設置爲'development'
    "build": "vue-cli-service build", //默認打包模式，會把process.env.NODE_ENV設置爲'production'
    "alpha": "vue-cli-service build --mode alpha", //自定義打包模式，會把process.env.NODE_ENV設置爲文件內定義的名稱
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
  }
}
複製代碼

添加.env.alpha文件

在項目根路徑建立.env.alpha文件，內容爲

NODE_ENV = 'alpha'
複製代碼

測試

建立下邊js文件，在頁面中引用

let baseUrl: string = "";   //這裏是一個默認的url，能夠沒有
switch (process.env.NODE_ENV) {
    case 'development':
        baseUrl = "http://localhost:8888/"  //這裏是本地的請求url
        break
    case 'alpha':   // 注意這裏的名字要和設置的模式名字對應起來
        baseUrl = "http://alpha.edik.cn/"  //這裏是測試環境中的url
        break
    case 'production':
        baseUrl = "https://www.edik.cn/"   //生產環境url
        break
}
export default baseUrl;
複製代碼