Vue中npm run build通过传递参数来打包不同版本_Vue项目多版本编译_Webpack根据环境打...
source link: https://www.wenyuanblog.com/blogs/vue-npm-install-with-params.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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/
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK