重点 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

 好了就这样吧，自己遇见什么情况自己运行一下。 
总结：不同的命令输入方式解析参数值的方式不同 
红框内可以配置参数
 
                                    大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻烦了. 如果可以像下面这样切换环境就方便了
npm run serve //默认本地开发环境
npm run serve -sit //本地开发中使用sit环境
npm run serve -uat //本地开发中使用uat环境
npm run build //默认打包后使用生产环境
npm run build -local //打包后使用本地环境
npm run build -sit //打包后使用sit环境
`npm run build -uat //
                                    Vue CLI 是 Vue 的项目的一个开发工具，简单来说，可以快速生成一套基于Vue完整的前端框架，因此也称之为脚手架。（vue3中也可以使用vite作为全新的脚手架）Vue CLI 是构建在Webpack之上的，因此开发服务器和构建功能和性能都将是Webpack的超集。你也可以使用 vue config 命令来审查或修改全局的 CLI 配置是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被自动加载。
在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。
这是你使用默认 preset 的项目的 package.json：
	  "scrip...
vue启动一个项目的时候，需要执行npm run serve，其中这个serve的内容就是vue-cli-service serve。可见，项目的启动关键是这个vue-cli-service与它的参数serve。接下来我们一起看看service中主要写了什么东东（主要内容以备注形式写到代码中。）。
vue-cli-service.js
const semver = require('semver')
const { error } = require('@vue/cli-shared-utils')
const requiredVersion = require('..
（1）**作用：**是打包资源文件
（2）**工具：**通过脚手架依赖的dotenv模块实现参数定义和读取
（3）**原理：**detenv作用是将环境变量从.env文件加载到process.env中，代码就可以通过process.env.VUE_APP_XX访问自定义的VUE_APP_XX的值了
在vue-cli-service的packjson中切换环境
(1)	在运行时如果需要区分生产环境和测试
                                    1.首先新建一个version.js页面。2.在vue.config.js 引入 version.js。3.在打包后的编译名称处增加自定义好的参数。时间戳同理，或者其他参数。
目的：为了能正常配置自定义参数。 例如 ：test1=xixixi ，前面要加上 cross-env。
2、安装 nodemon 
目的：自动完成node服务器和数据库服务器的重启，比如mock数据请求package.json 文件
test.js
二、解析：
1、执行自定义命令 test1 ，既 ，相当于执行了 test.js 这个文件，并进行参数的打印。
（1）test1 自定义命令定义了两个参数和；且命令指向了 test.js 文件。（2）自定义的参数可以再任何一个vu
                                    Vue-CLI详解Vue-CLI详解Vue CLICLI是什么意思?拉取 2.x 模板 (旧版本)Vue CLI2创建项目目录结构详解Runtime-Compiler和Runtime-only的区别render和templateVue程序运行过程render函数的使用Vue CLI3创建vue-cli3目录结构详解配置去哪里了？修改配置箭头函数基础语法
Vue-CLI详解
如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI;如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue C
                                    vue-cli3 源码解析
脚手架代码入口点
从package.json文件中可以看到"vue-cli-service": "bin/vue-cli-service.js"
Service.js 指令、配置文件管理类 new Service(context)
constructor (context, { plugins, pkg, inlineOptions, useBuiltIn }...