(www.rrdyw.cc)最近写项目遇到一个需求:同一个 Vue 项目打包给 Demo 环境、A 线上环境、B 线上环境时,需要它们各自的一套标题、Logo、请求接口等等定制化内容。 考虑在 Webpack 的打包阶段(npm run build)解决这个问题。
这篇文章主要介绍在 Vue 项目中,编译阶段(npm run build)通过传递参数,实现不同环境打包不同版本。
例如使用 npm run build – xxx,根据传递参数 xxx 来判定不同的环境,将代码中特定的内容进行打包,具体内容详情参考下文。
一、前言
最近写项目遇到一个需求:同一个 Vue 项目打包给 Demo 环境、A 线上环境、B 线上环境时,需要它们各自的一套标题、Logo、请求接口等等定制化内容。
考虑在 Webpack 的打包阶段(npm run build)解决这个问题。
关键词:编译时传环境变量,process.env.xxx
。
最终结果:使用 npm run build -- xxx
,根据传递参数 xxx 来判定不同的环境,打包出不同版本的文件。
二、修改 Webpack 配置文件
1. 项目中 /config/dev.env.js 修改
新增:VERSION:’”dev”‘,这里的 key 和 value 都是可以根据自己的实际情况来定义的。
javascript
// config/dev.env.js
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
VERSION: '"dev"'
})
2. 项目中 /config/prod.env.js 修改
获取 npm run build -- xxx
命令传递进来的参数,然后和上面一样新增 VERSION 字段。
javascript
// config/prod.env.js
let VERSION = process.argv.splice(2)[0] || 'prod';
console.log(VERSION);
module.exports = {
NODE_ENV: '"production"',
VERSION: '"' + VERSION + '"'
}
插入知识点:process 对象是一个全局变量,它提供当前 Node.js 进程的有关信息,以及控制当前 Node.js 进程。
process.argv 属性返回一个数组,这个数组包含了启动 Node.js 进程时的命令行参数。
数组的第一个元素 process.argv[0]
返回启动 Node.js 进程的可执行文件所在的绝对路径;
第二个元素 process.argv[1]
为当前执行的 JavaScript 文件路径;
剩余的元素为其他命令行参数。
例如:输入命令 npm run build -- demo
,打印 console.log(process.argv)
。
结果:
bash
[ 'D:\\Program Files\\nodejs\\node.exe',
'D:\\wenyuanblog\\blog-source\\build\\build.js',
'demo' ]
三、项目中修改
接下来就是修改项目中的代码,可以根据 process.env.VERSION
的值判断当前是什么环境,然后编写自己的逻辑。
例如:
javascript
/**
** 设置 API 接口域名
**/
let apiUrl = ''
// 根据 process.env.VERSION 的值判断当前是什么环境
// 命令:npm run build -- demo ,process.env.VERSION 就设置为:'demo'
let VERSION = process.env.VERSION
switch (VERSION) {
case 'demo':
apiUrl = 'http://api-demo.wenyuanblog.com'
break
case 'prod':
apiUrl = 'http://api.wenyuanblog.com'
break
default:
apiUrl = 'http://api-test.wenyuanblog.com'
}
axios.defaults.baseURL = apiUrl
四、最后执行编译命令
bash
npm run build -- demo
注意 --
是 2 个横杠,后面跟参数,这样 process.env.VERSION 就获取到参数 ‘demo’ 了。
五、总结
以上所述就是通过 vue 中 npm run build 传递参数的方法,实现不同环境打包出不同版本。核心就是利用编译时传环境变量,然后在业务代码中通过 process.env.xxx
来写一些实现逻辑。
如果有其它不同的方案,欢迎留言交流!