vue-cli3抽离配置文件,动态修改打包后配置
由于项目有外部部署需求，对不同的环境前端调用后台的地址不一样，且不能提前预知必须到部署现场后才能确定后端地址，故需要将调用后端相关的配置抽离到文件中，打包后部署人员在方便现场修改。
思路如下：
1.由于项目中vue初始化部分有很多网络请求，所以必须在加载vue的内容之前引入配置，为解决异步请求问题直接在public/index.html的head中引入配置（vue在body后注入）。
2.配置放在js文件中，js文件中将配置对象放到localStorage中。有方法是将配置对象赋值给window顶级对象，感觉这样不安全，故采用放到localStorage的方式。
3.在需要使用配置的地方，反序列化localStorage，取出其中的配置项使用。
操作方法：
1.在public目录下新建目录config，config目录下新建dynamicConfig.js文件，内容如下
let dynamicConfig = {
server_url: "http://127.0.0.1"
//自行加配置项
}
let jsonStr = JSON.stringify(dynamicConfig)
localStorage.dynamicConfig = jsonStr
2.修改public下index.html，引入dynamicConfig.js。使用config相对路径为了方便开发环境和生产环境都能调用到。
<head></head>内增加如下一行
<script src="config/dynamicConfig.js"></script> <!-- 读入抽离的配置 -->
3.配置webpack，使用copy-webpack-plugin插件将js文件打包到dist/config目录下。
1)安装插件
npm install -save copy-webpack-plugin
2)在vue.config.js中配置
const CopyWebpackPlugin = require("copy-webpack-plugin") //引入插件
module.exports = {
//...
configureWebpack: {
plugins: [
new CopyWebpackPlugin([ //打包时执行拷贝
{
from: __dirname + "/public/config/dynamicConfig.js",
to: __dirname + "/dist/config/dynamicConfig.js"
}
])
]
}
}
4.在js文件中读取配置
let endpoint = "http://127.0.0.1:8080"
//开发环境使用js中定义的配置，生产环境使用config/dynamicConfig.js中配置
if(process.env.NODE_ENV === "developement"){
endpoint = "XXX" //自定义
}else{
if(localStorage.dynamicConfig){ //使用从dist/config/dynamicConfig.js中读取的配置
let config = JSON.parse(localStorage.dynamicConfig) if(config.server_url) endpoint = config.server_url
}
}
动态修改配置方法：修改dist/config/dynamicConfig.js中server_url对应的值，修改后浏览器可能会有缓存哦~
vue-cli3抽离配置文件,动态修改打包后配置的更多相关文章
- 动态修改JDBC数据源配置
因项目需要能动态修改数据源的配置,及修改后不用重启整个应用.使用的数据源是apache的BasicDataSource,网上千篇一律的是如下实现: BasicDataSource bds=getDat ...
- iOS 修改打包后的.ipa应用名字
一.修改应用的名字 二.重新签名 下面详细介绍介绍两个步骤: 1.修改应用的名字: 1).解压.ipa文件,在Payload文件夹下有一个.app文件(如下图:)选中.app文件,右键点击“显示包内容 ...
- vue项目--favicon设置以及动态修改favicon
最近写公司项目时,动态更新favicon 动态更新之前需要有一个默认的favicon. 目前vue-cli搭建的vue项目里面已经有了一个static文件夹,存放静态文件. favicon图片放到该文 ...
- vue单页面应用中动态修改title
https://www.jianshu.com/p/b980725b62e8 https://www.npmjs.com/package/vue-wechat-title 详细信息查看:vue-wea ...
- vue使用v-for循环，动态修改element-ui的el-switch
在使用element-ui的el-switch中,因为要用v-for循环,一直没有成功,后来仔细查看文档,发现可以这样写 <el-switch v-for="(item, key) i ...
- Vue动态修改网页标题
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...
- vue+webpack项目打包后背景图片加载不出来问题解决
在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...
- C# WindowService 动态修改服务名
serviceInstaller1中可以设置服务名,描述等 在实际情况中,我们可能需要将Service多开来达到我们的目的,但是安装两次以上会有错误提示,因为服务名已经重复了,这个时候,我们需要动态改 ...
- Elasticsearch 动态修改replica配置、增删replica
1. 获取当前所有index配置 curl -XGET http://localhost:9200/_settings 2. 获取某些index的配置 curl -XGET http://localh ...
随机推荐
- MySQL 5.7 - 通过 BINLOG 恢复数据
日常开发,运维中,经常会出现误删数据的情况.误删数据的类型大致可分为以下几类: 使用 delete 误删行 使用 drop table 或 truncate table 误删表 使用 drop dat ...
- 从壹开始 [ Design Pattern ] 之二 ║ 单例模式 与 Singleton
前言 这一篇来源我的公众号,如果你没看过,正好直接看看,如果看过了也可以再看看,我稍微修改了一些内容,今天讲解的内容如下: 一.什么是单例模式 [单例模式],英文名称:Singleton Patter ...
- 减少HTTP请求的方式
1. 图片地图 缺点:坐标难定义:除了矩形之外几乎无法定义其他形状:通过DHTML(动态DOM操作)创建的图片地图在 IE 不兼容 <img usemap="#map1" b ...
- kafka-manager新手安装入门指南
Kafka-manager安装教程 使用环境 ubuntu18.04 Java 8 一.下载kafka 官网下载地址如下 https://www.apache.org/dyn/closer.cgi?p ...
- 你不知道的setTimeout第三个参数
你不知道的setTimout第三个参数 说起setTimeout,各位再熟悉不过,用法也很简单:setTimeout(fun, delay). 但说起来你可能不信,用了这么多年的setTimeout居 ...
- 【项目管理】Mybatis-Generator之最完美配置详解
今天看到了一篇总结特别详细的关于Mybatis-Generator配置文件的文章,特转载进行记录学习使用. 先附上原文地址链接:张思全----全哥文章 <?xml version="1 ...
- 【JZOJ2019.10.07】模拟赛C组
\(T1\) 题目描述&大意 贝西牛在每个点左右撞来撞去,不能出去 的情况下能活动(达到)的空间总共有多少? 思路 部分过程为: 反正就是能撞的撞 代码:
- 快捷键 导入命名空间shift +alt
- 串的匹配算法--C语言实现
串这种数据结构,使用是比较多的,但是它的一些方法在更高级的语言中,比如Java,Python中封装的比较完整了.在这里,我只写了串中使用最多的匹配算法,即串的定位操作.串的匹配算法常用的两种就是朴素匹 ...
- ImSQL：海量数据，可信存储
数据造假.数据不可信等问题的存在,给金融监管及风控等众多应用场景带来了严峻的挑战,也正成为阻碍数据大规模互联互通.共享共用的一大障碍.数据的真实可信问题长期影响着社会的各个领域,在更依赖数据的人工智能 ...