下面介紹如何結合vue-cli配置多套環境變數
版本:
當前vue-cli版本為4.54
目的：
規范專案開發流程，降低上線心智負擔
例如配置兩套環境，一套生產環境，一套開發環境，
開發環境
1.首先，在專案根目錄新建檔案名為.env.development的檔案
2.打開該檔案編輯環境變數(必須以VUE_APP_開頭的變數才能被webpack.DefinePlugin正確嵌入)
如：配置開發環境CDN路徑則為
NODE_ENV = development #若為生產環境此處應配置為production
VUE_APP_CDN="http://cdn.xxx.com/"
生產環境
1.首先，在專案根目錄新建檔案名為.env.production的檔案
2.打開該檔案編輯環境變數(必須以VUE_APP_開頭的變數才能被webpack.DefinePlugin正確嵌入)
如：配置開發環境CDN路徑則為
NODE_ENV = production#若為開發環境此處應配置為development
VUE_APP_CDN="http://cdn.dev.xxx.com/"
最終配置
1.編輯根目錄package.json檔案
在scripts中添加
"scripts": {
~~~
"serve": "vue-cli-service serve",
"serve--prod": "vue-cli-service serve --mode production",
"build": "vue-cli-service build",
"build--prod": "vue-cli-service build --mode production",
~~~
},
開發模式使用
npm run serve #專案啟動
生產模式使用
npm run serve--prod #啟動
npm run build--prod #打包
最終在專案中使用process.env.VUE_APP_CDN即可讀取到全域環境變數
至此兩套環境變數便配置成功，后續新增可自行添加
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/225821.html
標籤：其他