首页 > 其他分享 >前端框架中加入外部config可配置文件,根据不同的运行、编译环境,加载不同的配置文件

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

时间:2023-05-23 09:34:11浏览次数:46  
标签:index 配置文件 dev js env 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",

标签:index,配置文件,dev,js,env,config,加载
From: https://www.cnblogs.com/MrZhous/p/17422342.html

相关文章

  • SpringBoot配置文件
    概述初始化SpringBoot项目时,在resources目录下有一个默认的全局配置文件application.properties。SpringBoot通过配置文件来修改SpringBoot自动配置的默认值SpringBoot支持两种格式的配置文件application.yml和application.propertiesapplication.properties写法appl......
  • 纯CSS实现加载效果
    HTML标签<divclass="loading"><span></span><span></span><span></span><span></span><span></span></div>CSS样式<style>.loading{ width:80px; height:40px; ......
  • Flask相关配置参数,加载配置文件
    Flask相关配置参数,加载配置文件#导入Flask类fromflaskimportFlask#Flask函数接收一个参数__name__,它会指向程序所在的包app=Flask(__name__)#装饰器的作用是将路由映射到视图函数[email protected]('/')defindex():return'HelloWorld'#Flask应用程......
  • vue项目结合vant,实现上拉加载更多,下拉刷新
    上拉加载思路:引入vant组件上拉list后端数据做了分页处理,获取接口数据,渲染到页面上,(此处只会显示一页的数据)设置属性去实现效果,loading,finished为vant组件中提供的每次滚动到底部后把页面数+1,发送一次请求获取新分页数据.获取完数据,将新获取的数据跟上一页获取的数据做......
  • 当k8s拉镜像出现问题时 需要修改 /etc/containerd/config.toml 配置
    找到plugins."io.containerd.grpc.v1.cri".registry添加此两处配置 [plugins."io.containerd.grpc.v1.cri".registry.configs][plugins."io.containerd.grpc.v1.cri".registry.configs."192.168.16.185:8088".tls]insecu......
  • maven静态资源配置文件问题
    由于src-main-java里面的文件默认只加载.java类型的文件,如果需要将xml文件或者其他文件放到java文件夹中需要在pom文件中进行配置1<resources>2<resource>3<directory>src/main/java</directory>4<includes>......
  • 阿里云对象存储OSS————跨域资源共享(CORS)(m3u8 无法加载m3u8:跨域访问被拒绝)...
    今天在做视频直播录像的时候,添加一个录制APP的.M3U8文件到OSS的一个test文件中存储,结果是访问不到了:提示:无法加载m3u8:跨域访问被拒绝!!!!!项目代码测试地址:https://github.com/Tinywan/ThinkPhpStudy阿里云帮助文档:https://help.aliyun.com/document_detail/31928.html......
  • 13-1 udp和internet层协议 13-2IP地址组成和分类13-4 网卡配置文件和命令 13-5 网络理
    一、查看当前机器广播的地址和mac[root@centos8~]#arp-n查看当前机器的广播地址[root@centos8~]#tcpdump-ieth0arp-nn抓包[root@centos8~]#ipaa10.0.0.100/24deveth0添加多网卡命令[root@centos8~]#arping10.0.0.100查看IP有没有被占用二、查看相关包有......
  • LINQ to SQL语句之对象标识和对象加载
    [list][*]对象标识[/list]运行库中的对象具有唯一标识。引用同一对象的两个变量实际上是引用此对象的同一实例。你更改一个变量后,可以通过另一个变量看到这些更改。关系数据库表中的行不具有唯一标识。由于每一行都具有唯一的主键,因此任何两行都不会共用......
  • ExtJS 4中动态加载的路径设置
         在此首先感谢的文顺网友,是他提醒了我需要写这文的。     在Loader对象中,动态加载是使用getPath方法获取下载路径的,其代码如下:1 getPath: function(className) {2     var path = '',3         paths =......