需求:我们的乾坤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",