Vue 中 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 都是可以根据自己的实际情况来定义的。

// 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 字段。

// 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)
结果:

[ 'D:\\Program Files\\nodejs\\node.exe',
  'D:\\wenyuanblog\\blog-source\\build\\build.js',
  'demo' ]

三、项目中修改

接下来就是修改项目中的代码,可以根据 process.env.VERSION 的值判断当前是什么环境,然后编写自己的逻辑。

例如:

/**
** 设置 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

四、最后执行编译命令

npm run build -- demo

注意 -- 是 2 个横杠,后面跟参数,这样 process.env.VERSION 就获取到参数 ‘demo’ 了。

五、总结

以上所述就是通过 vue 中 npm run build 传递参数的方法,实现不同环境打包出不同版本。核心就是利用编译时传环境变量,然后在业务代码中通过 process.env.xxx 来写一些实现逻辑。

如果有其它不同的方案,欢迎留言交流!


参考
《深入浅出 Webpack》:https://webpack.wuhaolin.cn/
印记中文(翻译自官网):https://webpack.docschina.org/


博文对你有帮助吗?如果有的话,想不想送我一本书呢?
  目录