插件简介

此插件为 vue-cli 的扩展，用于在 vue-cli-service 命令开始执行的时候(不分 serve 或 build)，自动拼接产出 config.js 到 public 目录；插件产出 config.js 的模式有两种：

1. .env 文件 CONFIG_ 前缀变量模式
2. @config 目录模式

以上 2 种模式既可以单独使用，也可以混合使用

.env 文件 CONFIG_ 前缀变量模式

此模式主要和项目根目录下的 .env 文件有关，引入此插件后，vue-cli-service 命令运行的时候，项目根目录下的 .env 文件中配置的 CONFIG_ 开头的变量会被抽取出来，去掉变量名前缀，然后自动拼接到产出 config.js 头部，.env 文件的读取方式与 @vue/cli-service 插件内部一致；此模式常用于配置比较简单的项目，将插件配置项 enableEnv 设为 false，此功能即可被禁用

@config 目录模式

此模式要求项目根目录下有 @config 目录，@config 目录下有对应配置 js 文件(文件名一般为 config.js、config,{xx}.js 等)，vue-cli-service 命令运行的时候，插件会根据配置项 scene 从 @config 目录下选择配置文件：config.{scene}.js 和 config.js( config.{scene}.js 文件覆盖优先级更高)，合并拼接出最终的配置；如果 @config 目录不存在，或者其下的 config.{scene}.js 和 config.js 文件不存在，此模式将自动禁用；如果项目的配置比较复杂(比如：需要用到了 js 对象或者表达式)，场景非常多，CONFIG_ 前缀变量无法满足需求，建议使用更加灵活的 @config 目录模式

配置项 scene 默认取值来自 vue-cli-service 命令的 --mode 参数，mode 为 development 对应的 scene 为 dev，mode 为 production 对应的 scene 为 prd，除开这两种情况 scene 与 mode 值相等；当然，如果你不想使用默认 scene 配置，自行指定插件的 scene 配置项也是可以的

其它功能

除开以上功能，此插件还支持在 @config 目录下的 js 配置文件中，使用环境变量替换， enableEnv 为 true 时，此功能开启；用于替换的环境变量默认使用的是 node process.env(与 vue-cli-service 内部一致)；如果用户想自己指定使用哪个 .env 文件中配置的变量来替换，而不是 process.env，可通过配置 envMode 来决定使用 .env.{envMode} 文件而非 process.env 来提取变量用于替换

此插件还支持用户自行配置决定是否将产出的 config.js 文件自动插入到 index.html 的 head 或者 body，还可对插入的 script 标签自定义属性(如：sync、defer，type='module' 等)；

插件安装

 npm install vue-cli-plugin-resident-adapter

插件使用

根据 vue-cli 插件的运行原理，项目根目录的 package.json 文件中的 dependencies 或 devDependencies 中一定要有 vue-cli-plugin-resident-adapter ，否则此插件不会生效； 确保项目根目录的 package.json 文件中的 dependencies 或 devDependencies 中有 vue-cli-plugin-resident-adapter 后，在项目的 vue.config.js 文件中，引入如下代码：

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
    pluginOptions:  {
        resident: {
            // 插件具体配置请看后文
        }
    }
})

插件配置

插件配置如下

{
    scene: '', // 拼接到 config.js 的 config.{scene}.js 文件
    configFilePath: '@config', // 各种配置文件在项目根目录的存放目录
    outputFileName: 'config.js', // 配置拼接后产出文件的文件名，默认为 config.js
    prefix: 'CONFIG_', //.env 文件中，以此 prefix 开头的变量会在去除 prefix 后自动拼接到产出 config.js 文件的头部
    reg: /\/\*\{holder\}\*\//g,  // 通过此正则标志 /*{holder}*/ 可手动决定 config.{scene}.js 中内容拼接的位置，此标志可配置
    enableAppend: true,  // 如果 @config/config.js 文件中没有正则标志，config.{scene}.js 文件 默认追加拼接
    enableEnv: true, //默认开启产出 config.js 文件中环境变量的替换，不想使用此功能可关闭
    envMode: '', //产出的 config.js 文件中环境变量的替换，默认采用的变量是 node process.env，如果想更加灵活的指定从某个 .env 文件(.env.{envMode})中读取变量，可为此配置设置一个具体的值，指定后，变量组成的优先级为：.env.{envMode} > .env
    inject: true, //是否自动插入 config.js 到 index.html
    injection: {
        tag: 'head',
        attrs: {
            sync: false,
            defer: false
        }
    },
    env: {}
}

notes

1. 如果想在产出 config.js 文件中放置一段字符串 par = process.env.xxx，而不是 par = process.env.xxx，在 @config 目录下的配置文件中这样写即可：par = {process.env.xxx},这样就可以忽略此处代码的环境变量替换

示例项目 git 地址

vue2 示例[https://gitee.com/yali__home/vue2-demo.git]

新思路

1. 考虑到个人使用习惯，可否支持 .env 根据其内的 CONFIG_ 开头变量，自动生成 config.js ，且可以不存在 @config，@config 下面没有任何 config.js 文件也可以，这种属于简单情况下的使用，且 CONFIG_ 开头的变量是可以在 vue.config.js 中使用的，依然是一个地方配置，可以在配置文件(process.env.xxx)、业务代码(window.xxx 这样)中使用(非常好)，这种情况下就可以 vue-cli-service serve/build --mode {mode} 方式去编译了：.env.mock 、.env.st 、 .env.sj、.env.pruduction（需要验证下这样是否真的可以）
2. .env 文件的
3. vue-cli 的 --mode 没有明确指定的话，一般默认为 development，.env 文件的配置是默认会被其它 .env.{mode} 所覆盖的，所以，如果没有 @config，默认从 process.env 中提取 CONFIG_ 开头的变量
4. envMode 开放给用户设置，有没有意义呢？———— 有，如果我有 n 个 .env 文件，只有 2 个文件配置了不同的 msp，那么 n 种配置，就要做指定的变量提取了
5. scene 开放给用户设置有没有意义呢？———— 这个是有的，多场景(公司、st、sj)，多环境(mock、dev、sandbox、prd) 情况下非常灵活
6. 一贯的原则：重复的配置集中在一个 .env 文件即可，不要分散的到处都是，这样会增加维护难度，且不是所有 配置都需要放到 .env，所以 @config 模式非常有其存在的必要性
7. .env 文件中一般配置 vue.config.js 和 业务代码中通用的变量，不在这两种情况下通用的变量，不一定需要配置在 .env 文件中
8. 最终目标：不同环境的编译，做最小的改动来达成，最好集中到仅修改一个地方的一个值(之前又是改 vue.config.js，又要改 .env，又要改 config.js，非常不友好，甚至场景增加一次，index.html 上就要对应的加一个引入的判断分支代码，非常分散且容易出错)
9. prefix 变量的提取和环境变量的使用和 envMode 的指定是一致的