iview-admin多環境配置打包

legendaryedu發表於2019-04-01
View

iview-admin 目前版本，比起之前，移除了config目錄，並且將 vue-cli 升級到了3.0.

在實際開發中，我們可能會用到3種環境

  • 本地開發環境 dev
  • 測試環境 test
  • 線上環境 prod

當然，更正規的還會有一個預發環境。但是一般初創公司，有以上三種環境的居多。

那麼，不同環境會對應不同的介面地址，不同的線上地址等，為了解決開發人員頻繁切換XX地址，切換不同環境所對應的埠號，換多了，可能有的時候就忘記了現在到底是什麼地址，那麼我們就可以利用 vue-cli3.0 環境變數和模式特性來支援多環境配置打包，來解決配置切換問題。

在專案根目錄新增環境變數

  • 新增開發環境 .env.dev
NODE_ENV = 'dev'
VUE_APP_PORT = 7000
BASE_URL = '/'
複製程式碼
  • 新增測試環境 .env.beta
NODE_ENV = 'test'
VUE_APP_PORT = 7001
BASE_URL = 'http://xxx.com'
複製程式碼
  • 新增生產環境 .env.prod
NODE_ENV = 'prod'
VUE_APP_PORT = 7002
BASE_URL = 'http://xxx.com'
複製程式碼

不能使用 development、test、production ，他們是 NODE_ENV 預設的環境變數

其中，NODE_ENV 使用的是 production打包配置

VUE_APP_PORT 是 對應專案的 埠號

BASE_URL 是前端專案訪問時的相對地址

修改 vue.config.js

const BASE_URL = process.env.BASE_URL
複製程式碼

修改src/config/index.js檔案

baseUrl: {
   dev: 'http://localhost:8081',
   test: 'http://www.test.com',
   prod: 'http://www.prod.com'
 },
複製程式碼

修改src/libs/api.request.js檔案

const env = process.env.NODE_ENV
const baseUrl = config.baseUrl[env]
複製程式碼

如果需要mock資料，那麼可以在相應的環境變數中新增mock的標誌，操作是一致的。

相關文章