vue 區分正式環境、測試環境打包

一、根目錄下新建文件

.env.dev
.env.prod
.env.test

1. dev文件內容

//表明這是開發環境
NODE_ENV = 'development'

//指定當前環境模式
VUE_APP_CURRENTMODE = 'development'

2. prod文件內容

//表明這是生產環境(需要打包)
NODE_ENV = 'production'

//指定當前環境模式
VUE_APP_CURRENTMODE = 'prod'

//生成地址
outputDir = "prod"

3. test文件地址

//表明這是生產環境(需要打包)
NODE_ENV = 'production'

//指定當前環境模式
VUE_APP_CURRENTMODE = 'test'

//生成地址
outputDir = "test"

 

二、配置http請求

if (process.env.NODE_ENV === 'development') {
    // 設置默認本地開發
    axios.defaults.baseURL = utils.api.test_domain;
    // axios.defaults.baseURL = utils.local_domain;
} else if (process.env.VUE_APP_CURRENTMODE === 'test') {
    // 測試
    axios.defaults.baseURL = utils.api.test_domain;
} else if (process.env.VUE_APP_CURRENTMODE === 'prod') {
    // 默認正式
    axios.defaults.baseURL = utils.api.prod_domain;
}

 

三、配置package.json，修改打包指令

"prod": "vue-cli-service build --mode prod",  //注意 --mode prod 中的 “prod” 要與 第一步新建文件 “.env.prod” 一樣

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

 

四、在vue.config.js文件下配置輸出地址

/* 輸出文件目錄：在build時，生成文件的目錄名稱 */
outputDir: 'build/' + (process.env.outputDir ? process.env.outputDir : 'dist'),

 

五、運行npm run prod 或 npm run test