vue - 多環境配置總結

總結幾點，超級重要：
不可使用關鍵字pro和test ,因此才會使用prod和tes

下面解說的截圖使用的是test關鍵字，隨筆寫的比較早，現在需要改正，截圖就不改了，知道就行

使用test關鍵字的 bug 發現場景:
使用test配置文件打包，會導致，打包的文件在瀏覽器使用時，報錯，提示 動態路由 無法加載vue頁面 ， 具體的報錯體現為

Cannot find module '../views/xxx' 

如
Cannot find module '../views/mymenu/module/manage/account/manageacco' 

1.添加自定義多環境配置文件

 

我這里加了三個，分別是本地、生產、測試環境的配置文件

dev內容

#.env.dev  開發環境
NODE_ENV='dev'
VUE_APP_CURENV='dev'
VUE_APP_HOST = "http://localhost:8100"

其他的兩個

#.env.pro  開發環境
NODE_ENV='prod'
VUE_APP_CURENV='prod'
VUE_APP_HOST = "https://域名1"

#.env.test 測試環境的配置
NODE_ENV='tes'
VUE_APP_CURENV='tes'
VUE_APP_HOST= "域名2"

2.package.json 文件添加指令配置

 

 

    "serve": "vue-cli-service serve --mode dev --open",
    "dev": "vue-cli-service serve --mode dev --open",
    "build:dev": "vue-cli-service build --mode dev",
    "build:tes": "vue-cli-service build --mode tes",
    "build:prod": "vue-cli-service build --mode prod",

 

3.在根路徑添加 config.js 文件，當然，其他的名字也可以

 

將需要的內容導出即可被需要的地方import來使用

let BASE_URL = process.env.VUE_APP_HOST;
export default BASE_URL;

4.使用配置文件數據，路徑需要改成自己的

 

 

import BASE_URL from "../../../config";

let host = BASE_URL