vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue CLI 命令行打包配置自定义参数

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

作者:码砖咋说

这篇文章主要介绍了Vue CLI 命令行打包配置自定义参数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

前言

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

需求:我要通过【页面ID】访问接口数据,进行Vue模块化构建包含【页面数据】的静态页面。我有很多的页面ID!!!(不要纠结为啥有这样的需求,干就完了)

思路:

重点 vue.config.js

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

重点

console.log(process.env.VUE_APP_PAGE_ID)

除了 VUE_APP_* 变量之外,在你的应用代码中始终可用的还有两个特殊的变量:

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

配置

代码

vue.config.js 文件全部代码

// 解析指令参数
// 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

日志

使用

代码

日志输出

扩展

按照我上面描述的配置成功是没问题的。但是作为低调的程序员我们要尝试一下其它输入命令的方式看看输出的日志:

ps:本人自己都尝试过,感觉做程序员好难

第一种

npm run serve -- --pageId=P312

第二种

npm run serve pageId=P312

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

注意:不同的命令输入方式解析参数值的方式不同

彩蛋

红框内可以配置参数

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文