vue vue-cli 不同的环境打包不同的接口地址

由于项目需要使用webpack构建的工程，在开发过程中不同环境的配置不同，在各种环境的打包切换过程中需要手动修改相关配置达到预期目的。比较麻烦，所以借鉴别人方法写了不同环境打包分类配置。

 

打包配置文件基本就是这样

一个项目的开发调试过程肯定不止开发环境和生产环境，由于缺少环境常量，开发人员常常需要手动修改请求Api域名，进而导致如果项目存在多个环境时，多出的环境没办法自动化构建。

第一步、

新建一个env-config.js在build文件中

/*
 使用方法示例：
 打包：
 打包dev环境：npm run build --dev
 打包test环境：npm run build --test
 打包pro环境：npm run build --pro
 本地运行：
 本地运行dev环境：npm run dev --dev
 本地运行test环境：npm run dev --test
 无【--xxx】参数，则默认为dev环境：npm run dev
 */
'use strict'
 
const chalk = require('chalk')
const path = require('path')
/*
 * 环境列表，第一个环境为默认环境
 * envName: 指明现在使用的环境
 * dirName: 打包的路径，只在build的时候有用
 * baseUrl: 这个环境下面的api 请求的域名
 * assetsPublicPath: 静态资源存放的域名，未指定则使用相对路径
 * */
const ENV_LIST = [
    {
        //开发环境
        envName: 'dev',
        dirName: 'dev',
        baseUrl: 'http://192.168.x.x:1111',
        assetsPublicPath:'/'
    },
    {
        //测试环境
        envName: 'test',
        dirName: path.resolve(__dirname, '../wechain'),
        baseUrl: 'http://47.104.xx.xx:2222',
        assetsPublicPath: '/'
    },
    {
        //生产环境（命令行参数（process.arg）中prod是保留字，所以使用pro）
        envName: 'pro',
        dirName: path.resolve(__dirname, '../wechain'),
        baseUrl: 'http://47.104.xxx.xxx:3333',
        assetsPublicPath:'/'
    },
 
]
console.log("process.env.assetsPublicPath="+process.env.assetsPublicPath)
//获取命令行参数 http://nodejs.cn/api/process.html#process_process_argv
const argv = JSON.parse(process.env.npm_config_argv).original || process.argv
const HOST_ENV = argv[2] ? argv[2].replace(/[^a-z]+/ig,"") : ''
//没有设置环境，则默认为第一个
const HOST_CONF = HOST_ENV  ? ENV_LIST.find(item => item.envName === HOST_ENV) : ENV_LIST[0]
// 把环境常量挂载到process.env.HOST_ENV方便客户端使用
process.env.BASE_URL = HOST_CONF.baseUrl
// process.env.ENV_NAME = HOST_CONF.envName
// log选中的变量
console.log(chalk.green('当前环境：'))
console.log(HOST_ENV)
console.log(chalk.green('当前环境对应的常量：'))
console.log(HOST_CONF)
 
module.exports.HOST_CONF = HOST_CONF
module.exports.ENV_LIST = ENV_LIST

第二步、

修改 build下webpack.base.config.js   引入公用的env-config.js 

require('./env-config.js');

第三步、

修改 build下webpack.dev.config.js的代码

//找到plugins，在这里面添加如下代码

plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env'),
       //添加下面代码
      'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"'
    }),
]

第四步、

修改 build下webpack.prod.config.js的代码

//找到plugins，在这里面添加如下代码

 plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env,
       //添加下面代码
      'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"'
    }),
}

以上配置已经完成  

 打包dev环境：npm run build --dev
 打包test环境：npm run build --test
 打包pro环境：npm run build --pro
 本地运行：
 本地运行dev环境：npm run dev --dev
 本地运行test环境：npm run dev --test
 无【--xxx】参数，则默认为dev环境：npm run dev

直接在页面调用   process.env.BASE_URL  就可以拿到配置的域名/ip

另外：

如果需要配置更多变量，如测试和生产的私钥可以在env-config.js进行添加

//找到 ENV_LIST 在这里修改
const ENV_LIST = [
    {
        //开发环境
        envName: 'dev',
        dirName: 'dev',
        baseUrl: 'http://192.168.x.x:3333',
        assetsPublicPath:'/'，
        privateKey:'devprivateKey',//后添加的私钥
    },
    {
        //测试环境
        envName: 'test',
        dirName: path.resolve(__dirname, '../wechain'),
        baseUrl: 'http://47.104.xx.xx:2222',
        assetsPublicPath: '/',
        privateKey:'testprivateKey',//后添加的私钥
    },
    {
        //生产环境（命令行参数（process.arg）中prod是保留字，所以使用pro）
        envName: 'pro',
        dirName: path.resolve(__dirname, '../wechain'),
        baseUrl: 'http://47.104.xxx.xxx:3333',
        assetsPublicPath:'/',
        privateKey:'proprivateKey',//后添加的私钥
    },
 
]
 
 
 
 
// 找到process.env.BASE_URL = HOST_CONF.baseUrl这段代码，在下面添加
process.env.BASE_URL = HOST_CONF.baseUrl;
process.env.privateKey= HOST_CONF.privateKey; //添加的私钥

 

然后我们需要在webpack.dev.config.js和webpack.prod.config.js里面把如下代码修改

 new webpack.DefinePlugin({
   'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"',
   'process.env.privateKey': '\"' + process.env.privateKey+ '\"',//后加的私钥
 }),

以后需要更多配置变量可以按照以上方式添加。