靜下來 慢慢看
首先 我們需要搭建一個專案
依賴包會自動下載好 無需自己 npm i
.env 無論什么環境都會加載
.env.production 生產環境加載
.env.development 測驗開發環境加載
我們下面的例子分開來寫 只用 .env.production .env.development
在專案根目錄新建兩個檔案 分別為.env.production檔案 .env.development檔案
在檔案里面我們配置如下
在.env檔案
VUE_APP_NAME='vue測驗名稱'
.env.development檔案：
NODE_ENV = development
VUE_APP_URL = 'developmentURL' //自定義變數 必須要以VUE_APP_開頭定義
.env.production 檔案：
NODE_ENV = production
VUE_APP_URL = 'productionURL' //自定義變數 必須要以VUE_APP_開頭定義
下面我們就需要配置 package.json
{
"name": "my",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
//打包測驗開發版本
//--mode 后面需要對用檔案的名字.env.development 重點是要和.env.后面的名字對應起來
"build-development": "vue-cli-service build --mode development",
//打包生產版本
//--mode 后面需要對用檔案的名字.env.production 重點是要和.env.后面的名字對應起來
"build-production": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
},
...//json檔案太長 后面的沒用復制過來 主要看上面的scripts
}
下面我們在app.vue中列印一下我們設定的這個VUE_APP_URL
mounted() {
console.log(process.env,'process.env')
console.log(process.env.VUE_APP_URL, "VUE_APP_URL");
}
我們在本地運行
npm run serve
會加載.env和.env.development兩個檔案
我們會看到控制臺列印
可以看到 process.env是一個全域物件 我們可以在物件上加自己需要的屬性
在運行npm run serve的時候它會自動編譯 測驗開發版本 所以能加在.env.development檔案的變數
我們嘗試打包生產版本
npm run build-production
會在檔案根目錄生成dist檔案夾
我們嘗試在本地打開dist 運行vue打包好的檔案
我們需要在全域安裝 http-server 這個npm包
npm i -g http-server
我們進到 dist檔案夾中 打開cmd
執行http-server
在瀏覽器打開 看看控制臺列印
確實 就是我們在app.vue下列印的變數，值就是我們在.env和.env.production里面設定的值；
由此 大大的方便了我們的打包流程，不需要每次打包測驗URL、生產URL來回切換了~
我們可以將這個VUE_APP_URL封裝到axios中 更加方便了我們開發~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/271429.html
標籤：區塊鏈
上一篇：解決gpedit問題