526互联

前端框架中加入外部config可配置文件，根据不同的运行、编译环境，加载不同的配置文件

发布时间 2023-05-23 09:30:31作者: Math点PI

需求：我们的乾坤vue框架，需要集成给第三方，menu由他们处理（包括菜单权限），我们只负责提供一个去除menu和头部的main即可；
这里需要可配置，不能把我们的menu弄丢了。

实现方式：
1、在src同级目录新建 public/plugins/config.js
因为是基于webpack打包，会自动过滤public下的文件，复制到打包后的dist文件夹下，所以这个文件不会被打包压缩；可供给后端配置；

2、config.js的配置
根据不同的环境 test dev product；返回不同的对象；我这里需要加个showMenu：false；

  window._getConfig = function (i) {
    var index = env || i;
    console.log("当前环境为：", index);
    var result = Object.assign(i, config[index] || {}, { env: index });
    return result;
  };

默认环境dev，定义环境形参，可通过函数传入

3、main.js中传入环境参数
let config = window._getConfig(process.env.NODE_ENV)

4、index.html 中引入该文件
<script src="<%= BASE_URL %>plugins/config.js"></script>

按照如上配置，就能根据不同环境获取不同的配置参数；还有个问题，环境参数怎么传入呢？
5、package.json中配置编译命令；NODE_ENV即为环境变量参数
"dev": "cross-env NODE_ENV=dev vue-cli-service serve",
"build": "cross-env NODE_ENV=dev vue-cli-service build",