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

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 来写一些实现逻辑。

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

百度云盘资源