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的標誌,操作是一致的。