vue/cli 3.0配置NODE_ENV

　　原文地址

---

 

　　在項目開發中咱們須要配置環境變量，開發環境，生產環境和測試環境。在cli 2.0的版本中咱們是經過在config文件夾進行配置的，vue/cli 3.0相對簡單，只須要在項目根目錄建立.env文件便可。如下是環境對應文件名和命令

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

　　

　　注意： process.env.NODE_ENV爲默認變量，會自動設置爲上邊對應的模式名稱

　　變量必須以VUE_APP_開頭
　　被載入的變量將會被vue-cli-service的全部命令、插件、依賴可用。

 　　

自定義模式

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

"lint": "vue-cli-service lint" }, "dependencies": { } }

　　

添加.env.alpha文件

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

NODE_ENV = production

VUE_APP_URL=http://192.168.000.178/

測試

//在axios文件中引用接口地址
let config = {
  baseURL : process.env.VUE_APP_URL,
  timeout: 60 * 1000, // Timeout
  showLoading: true,
};

　　如今各個環境就會自動引用本身環境內的變量啦，須要注意的是NODE_ENV的名字打包時爲production，開發運行爲development，不然會形成環境找不到對應的模式配置，打包出的項目體積也會巨大無比。

　　

---

返回目錄