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