Vue配置環境變量的正確打開方式

Posted on by

第一 配置package.json

package.json 裡的 scripts 配置 serve test build，通過 --mode xxx 來執行不同環境
通過 npm run serve 啟動本地 , 執行 development
通過 npm run test 打包測試 , 執行 testing
通過 npm run build 打包正式 , 執行 production
"scripts": {
  "serve": "vue-cli-service serve --open",
  "test": "vue-cli-service build --mode testing",
  "build": "vue-cli-service build",
}

第二 配置介紹 簡單說明 看詳情點擊上面tps

 以 VUE_APP_ 開頭的變量，在代碼中可以通過 process.env.VUE_APP_ 訪問。

 比如,VUE_APP_MY_NAME = '活在風浪' 通過process.env.VUE_APP_MY_NAME 訪問。 

除瞭 VUE_APP_xxx 變量之外，在你的應用代碼中始終存在兩個默認變量NODE_ENV 和BASE_URL

第三 在根目錄新建文件

  • .env.development 本地開發環境配置
  • 內容如下
NODE_ENV='development'
  • .env.staging 測試環境配置
NODE_ENV='production'
  • .env.production 正式環境配置
 NODE_ENV='production'

第四 

文件已建立完畢,下一步該封裝baseURL瞭,如果你封裝瞭axios,在你的axios父文件夾中在新建一個baseURL.js裡面寫的是判斷環境的代碼

let baseURL = "";
if (process.env.NODE_ENV == "development") {
    // 開發環境  因為我這裡寫瞭配置跨域的重定路徑所以是api
    baseURL = "/api";
} else if (process.env.NODE_ENV == "production") {
    // 正式環境
    baseURL = "https://www.baidu.com";
} else {
    // 測試環境
    baseURL = "https://www.ceshi.com";
}
export default baseURL;

第五 

導出baseURL  在封裝axsio的地方導入baseURL 將公共地址換成 baseURL變量 (baseURL變量就是寫的環境判斷)

使用不同的命令 請求的網址就不一樣 如

//啟動本地服務器
npm run serve
//啟動打包命令
npm run build
//啟動測試環境命令
npm run test

說一個細節:如果運行打包命令,dist中index.html直接打開是相對電腦盤符的

要使用一個插件 直接在vsc插件管理下載

總結:

先配置package.json 在新建需要文件 然後寫判斷環境代碼

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：