使用webpack构建的工程,在开发过程中不同环境的配置不同,在各种环境的打包切换过程中需要手动修改相关配置达到预期目的。但是每次都手动修改会比较麻烦,所以参考了别人解决方案,自己进行总结,实现了不同环境打包分类配置。
参考:vuejs添加环境常量----多环境开发打包场景解决方案之一 - 个人文章 - SegmentFault 思否 https://segmentfault.com/a/1190000014899779?utm_source=channel-hottest
我的vue项目的目录是这样的
一个项目的开发调试过程肯定不止开发环境和生产环境,由于缺少环境常量,开发人员常常需要手动修改BASE_URL,进而导致如果项目存在多个环境时,多出的环境没办法自动化构建。
axios.defaults.baseURL = 'http://xxx.xxx.xx.xx/' //更改环境api需要手动修改
- env-config.js是我后添加进去的。
env-config.js 如下
/*
使用方法示例:
打包:
打包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:8767',
assetsPublicPath:'/'
},
{
//测试环境
envName: 'test',
dirName: path.resolve(__dirname, '../wechain'),
baseUrl: 'http://47.104.xx.xx:8767',
assetsPublicPath: '/'
},
{
//生产环境(命令行参数(process.arg)中prod是保留字,所以使用pro)
envName: 'pro',
dirName: path.resolve(__dirname, '../wechain'),
baseUrl: 'http://47.104.xxx.xxx:8767',
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
2.修改了webpack.base.config.js的代码,我需要引入公用的env-config.js
3.修改了webpack.dev.config.js的代码
//找到plugins,在这里面添加如下代码
plugins: [
new webpack.DefinePlugin({
'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"'
})
],
4.修改了webpack.prod.config.js的代码
//找到plugins,在这里面添加如下代码
plugins: [
new webpack.DefinePlugin({
'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"'
})
],
5.如果需要配置更多变量,如测试和生产的私钥可以在env-config.js进行添加
//找到 ENV_LIST 在这里修改
const ENV_LIST = [
{
//开发环境
envName: 'dev',
dirName: 'dev',
baseUrl: 'http://192.168.x.x:8767',
assetsPublicPath:'/',
privateKey:'devprivateKey',//后添加的私钥
},
{
//测试环境
envName: 'test',
dirName: path.resolve(__dirname, '../wechain'),
baseUrl: 'http://47.104.xx.xx:8767',
assetsPublicPath: '/',
privateKey:'testprivateKey',//后添加的私钥
},
{
//生产环境(命令行参数(process.arg)中prod是保留字,所以使用pro)
envName: 'pro',
dirName: path.resolve(__dirname, '../wechain'),
baseUrl: 'http://47.104.xxx.xxx:8767',
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+ '\"',//后加的私钥
}),
第五点私钥只是举了个例子,以后需要更多配置变量可以按照以上方式添加。
我把自己配置环境的情况进行总结,有什么不足地方请多多指教。