解決vue-cli項目多個環境部署配置問題

原文https://blog.csdn.net/linbenjian/article/details/85261201

使用vue-cli3打包項目,通過配置不同的指令給項目設置不一樣的配置。

npm run serve時會把process.env.NODE_ENV設置爲‘development’;

npm run build 時會把process.env.NvODE_ENV設置爲‘production’;

此時只要根據process.env.NODE_ENV設置不同請求url就可以很簡單的區分出本地和線上環境。

頭疼的是打包時線上環境可能分多種,比如測試環境和生產環境等等。

在vue-cli2中打包時可以修改 “build” 和 “config”中的文件來區分不同的線上環境

而vue-cli3號稱0配置,無法直接修改打包文件,那麼怎麼區分不同的線上環境分別傳入不一樣的配置呢?

官網給我們做了簡單介紹(vue-cli-service-build),但只解釋了現有幾個指令所匹配的模式,對於上面的需求顯然無法滿足。

如下提供一種解決方案:
首先在package.json文件內添加測試環境和生產環境的打包指令:

  "build-test": "vue-cli-service build --mode alpha",
  "build-prod": "vue-cli-service build --mode prod",

在項目根目錄添加兩個文件
.env.alpha

  NODE_ENV = 'production'
  VUE_APP_BASE_URL = 'http://test.linbenjian.work'

.env.prod

  NODE_ENV = 'production'
  VUE_APP_BASE_URL = 'http://www.linbenjian.work'

在項目中使用參數:

  import axios from 'axios'
  let baseurl = process.env.VUE_APP_BASE_URL || 'http://localhost:9001'

注:

—mode後面添加test、production 等預留參數無效
配置文件內,參數添加VUE_APP 可通過調試

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章