前端框架中加入外部config可配置文件,根据不同的运行、编译环境,加载不同的配置文件
需求:我们的乾坤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",
5.2、vue-cli-service --mode development 命令也行
使用这个命令,mode 默认是 development,还有test 和 production;
你也可以使用vue-cli-service命令配合 .env.[mode]文件,在webpack下用VUE_APP_XXX ;将不同环境的环境变量挂载到客户端环境上;取值方式:process.env.VUE_APP_XXX
如果是vite,变量命名得是VITE_XXX

本文来自博客园,作者:Math点PI,个性签名:“不写bug怎么进步?”,转载请注明原文链接:https://www.cnblogs.com/MrZhous/p/17422342.html

浙公网安备 33010602011771号