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

目录
  • 前言
  • 重点 vue.config.js
  • 在 vue.config.js 文件中计算环境变量
    • 配置
    • 代码
    • 命令
    • 日志
    • 使用
  • 扩展
  • 彩蛋
  • 总结

前言

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

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

思路：

  • 1.通过命令行打包时传入【页面ID】
  • 2.Vue构建过程中访问接口生成静态页面
  • 3.发布部署

重点 vue.config.js

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

重点

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

除了 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

日志

使用

代码

日志输出

扩展

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

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

第一种

npm run serve -- --pageId=P312

第二种

npm run serve pageId=P312

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

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

彩蛋

红框内可以配置参数

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue-cli配置打包文件本地使用的教程图解

    最近做的一个嵌入app的pc端项目,用的也是比较熟悉的vue-cli构建工具构建项目,需要的是打开dist文件夹入口html能加载到本地的静态文件,打包后的index.html加载文件如图: url中的路径据我们所知,最前面为一个反斜杠(/XX),表示从网站根目录开始搜索文件,如果需要相对当前文件夹则需以 ./或者不加反斜杠为路径开头,看来是打包后的文件路径有问题 于是就去找webpack.base.conf.js文件,有个output选项,output是webpack中对输出文件的配置,最常用

  • 基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法

    背景 •基于Vue-cli 项目产品部署,涉及到的交互的地址等配置信息,每次都要重新打包才能生效,极大的降低了效率.我们的目的是让项目实施的小伙伴重新快乐起来.网上实现的方式,都是半自动化的,还需要重新修改. 需求点 •配置化:打包后的配置文件可二次修改 •配置自动生成:vue-cli 提供了各种环境的打包,要实现相关配置文件的自动打包 •研发人员无痛感:对于产品研发人员来说,不需要增加额外的打包成本,基于Vue-cli的开发习惯不变. 实现步骤 一:配置自动生成 •安装generate-ass

  • vue-cli3配置多项目并按项目分别实现打包

    目录 vue-cli3配置多项目并按项目分别打包 项目结构 vue.config.js相关配置 注意 最后一步 补充:开发环境如何进入不同项目环境 总结 vue-cli3配置多项目并按项目分别打包 demo地址:https://github.com/lmy01/vue-multipage 本次项目由于分为客户端和客服端,第一反应便是在vue中构建多页面. 项目结构 这里主要讲解下面所标文件的用处 vue.config.js相关配置 配置好之后,运行npm run build,项目被打包到dist

  • Maven 命令行打包 和 pom.xml的常用配置详解

    maven 命令行打包 mvn -v, --show-version 现在最新的maven版本是 3.6,我这里用的还是 2017 年下载的 3.1.1 版本(虽然有点过时,但是大版本不变,指令基本一样) mvn -h, --help 使用 help 命令可以看到 maven 命令的帮助文档,下面主要介绍两个常用的指令 -- D 和 P. mvn -D, --define <arg> mvn -DpropertyName=propertyValue clean package 可以用来临时定义

  • 在Linux下通过命令行打包Android应用的方法

    本文介绍了在Linux下通过命令行打包Android应用的方法,分享给大家,具体如下: Requirements Ubuntu 16.04 sdk tools for linux Java 8 准备环境 安装Shell工具 sudo apt install -y wget unzip git 安装JDK sudo apt install -y openjdk-8-jdk # 查看结果 java -version 初始化目录与环境变量 BUILD_BASE=`echo ~` export ANDR

  • ThinkPHP3.1.2 使用cli命令行模式运行的方法

    前言 thinkphp3.1.2 需要使用cli方法运行脚本 折腾了一天才搞定 3.1.2的版本真的很古老 解决 增加cli.php入口文件 define ('APP_NAME','App'); define ('APP_PATH','./App/'); define('APP_DEBUG', true); define('MODE_NAME','cli'); require './Base/ThinkPHP.php'; 注意目录名称:根据实际去改 cli.php文件增加解析模块.方法名.参数

  • Unity命令行打包WebGL的示例代码

    1.扫描所有场景,保存并添加到Build Settings中 using System.Collections; using System.Collections.Generic; using System.IO; using UnityEditor; using UnityEngine; using UnityEngine.SceneManagement; public class SceneUtils { #if UNITY_EDITOR public static void Refresh

  • Go语言中使用urfave/cli命令行框架

    Go语言中使用urfave/cli命令行框架

    命令行参数处理以及urfave/cli使用 1.通过Os.Args获取cli的参数 package main import ( "fmt" "os" ) func main() { if(len(os.Args) > 1) { for _,value := range os.Args{ fmt.Printf( "%v\n",value) } return } fmt.Printf( "%s","没输入参数&qu

  • Python命令行参数化的四种方式详解

    目录 1. sys.argv 2. argparse 3. getopt 4. click 最后 大家好,在日常编写 Python 脚本的过程中,我们经常需要结合命令行参数传入一些变量参数,使项目使用更加的灵活方便 本篇文章我将罗列出构建 Python 命令行参数的 4 种常见方式 它们分别是: 内置 sys.argv 模块 内置 argparse 模块 内置 getopt 模块 第三方依赖库 click 1. sys.argv 构建命令行参数最简单.常见的方式是利用内置的「 sys.argv

  • 手把手教你如何使用nodejs编写cli命令行

    前端日常开发中,会遇见各种各样的cli,比如一行命令帮你打包的webpack,一行命令帮你生成vue项目模板的vue-cli,还有创建react项目的create-react-app等等等等.这些工具极大地方便了我们的日常工作,让计算机自己去干繁琐的工作,而我们,就可以节省出大量的时间用于学习.交流.开发. 逛steam . 但是有时候一些十分特别的需求,我们是找不到适合的cli工具去做的.比如说,你的项目十分庞大,你给项目添加一个新的路由,要经过 创建目录 -> 创建.vue文件 -> 更新

  • node通过npm写一个cli命令行工具

    node通过npm写一个cli命令行工具

    前言 如果你想写一个npm插件,如果你想通过命令行来简化自己的操作,如果你也是个懒惰的人,那么这篇文章值得一看. po主的上一篇文章介绍了定制自己的模版,但这样po主还是不满足啊,项目中我们频繁的需要新建一些页面,逻辑样式等文件,每次都手动new一个,然后复制一些基本代码进去非常的麻烦,所以就有了这篇文章.接下来就让po主为大家一步一步演示怎么做一个npm命令行插件. 注册npm账户 发布npm插件,首先肯定要有个npm帐号了,过程就不啰嗦了,走你. npm官网 有了账号后,我们通过npm in

  • C#命令行编译器配置方法

    大家好!下面由我给大家讲解一下如何 配置C#命令行编译器 1.配置C#命令行编译器: 我的电脑 -〉高级 -〉环境变量 -〉Path -〉添 加";C:\Windows\Microsoft.NET\Framework\v2.0.50727"(Path的最后一个路径虽版本 的改变而改变).csc.exe(C#命令行编译器)就放在该目录下.通过csc /?来查看所有参 数.   2.配置其它.NET命令行工具 我的电脑 -〉高级 -〉环境变量 -〉Path -〉添加";D:\Pr

  • Vue工程模板文件 webpack打包配置方法

    1.github github地址:https://github.com/MengFangui/VueProjectTemplate 2.webpack配置 (1)基础配置webpack.base.config.js const path = require('path'); //处理共用.通用的js const webpack = require('webpack'); //css单独打包 const ExtractTextPlugin = require('extract-text-webp

随机推荐