Vue CLI 命令行打包配置自定义参数

前言

难点来自于需求，好👍那我们就说说我是因为什么需求呢？

• 需求：我要通过【页面ID】访问接口数据，进行Vue模块化构建包含【页面数据】的静态页面。我有很多的页面ID!!!（不要纠结为啥有这样的需求，干就完了）
• 思路：1.通过命令行打包时传入【页面ID】2.Vue构建过程中访问接口生成静态页面 3.发布部署

重点 vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。如果没有需要你自己创建一个

重点

1. Vue CLI 构建命令配置参数就是修改构建环境变量和模式；
2. 可以在 vue.config.js 文件中计算环境变量；
3. 只有以 VUE_APP_ 开头的变量会被静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：

console.log(process.env.VUE_APP_PAGE_ID)

4. 除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：
   • NODE_ENV - 会是 “development”、“production” 或 “test” 中的一个。具体的值取决于应用运行的模式。
   • BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

在 vue.config.js 文件中计算环境变量

配置

代码

vue.config.js 文件全部代码

• npm指令需要读取 process.env.npm_config_argv
• vue-cli-service指令需要读取 process.argv

// 解析指令参数
// npm指令需要读取 process.env.npm_config_argv
const argv = JSON.parse(process.env.npm_config_argv);
// vue-cli-service指令需要读取 process.argv，我用的是npm
const argv1 = process.argv;

console.log("process.env.npm_config_argv值", argv)
console.log("process.argv值", argv1)

const config = {};
// 获取自定义参数
let idx = 2;
const cooked = argv.cooked;
const length = argv.cooked.length;
while ((idx += 2) <= length) {
    config[cooked[idx - 2]] = cooked[idx - 1];
}

process.env.VUE_APP_PAGE_ID = config['--pageId']
console.log("页面ID：" + process.env.VUE_APP_PAGE_ID)

// VUE 平台配置内容
module.exports = {
    productionSourceMap: false
}

命令

liukeruideMacBook-Pro:vuedemo liukerui$ npm run serve --pageId=P312

日志

使用

1. 代码
   
2. 日志输出
   

扩展

按照我上面描述的配置成功是没问题的。但是作为低调的程序员我们要尝试一下其它输入命令的方式看看输出的日志：
ps：本人自己都尝试过，感觉做程序员好难🤯

• 第一种

npm run serve -- --pageId=P312

第二种

npm run serve pageId=P312

好了就这样吧，自己遇见什么情况自己运行一下。

总结：不同的命令输入方式解析参数值的方式不同

彩蛋

红框内可以配置参数