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 ...
随机推荐
- 搭建wordPress遇到无法连接数据库的问题
在确认了数据库用户,密码,地址都没有错的情况下,仍然出现无法连接数据库的问题,以至无法安装wordpress 我的wordpress:4.8.1-zh_CN 解决办法: 1.更改php的版本(我的改为 ...
- SpringBoot 源码解析 （十）----- Spring Boot的核心能力 - 集成AOP
本篇主要集成Sping一个重要功能AOP 我们还是先回顾一下以前Spring中是如何使用AOP的,大家可以看看我这篇文章spring5 源码深度解析----- AOP的使用及AOP自定义标签 Spri ...
- 新闻实时分析系统-Flume+HBase+Kafka集成与开发
1.下载Flume源码并导入Idea开发工具 1)将apache-flume-1.7.0-src.tar.gz源码下载到本地解压 2)通过idea导入flume源码 打开idea开发工具,选择File ...
- Java程序在内存中运行详解
目录 Java程序在内存中运行详解 一.JVM的内存分布 二.程序执行的过程 三.只有一个对象时的内存图 四.两个对象使用同一个方法的内存图 五.两个引用指向同一个对象的内存图 六.使用对象类型作为方 ...
- day 41 css固定位置 以及小米商城项目
.如何让一个绝对定位的盒子居中 left:%; margin-left:- 宽度的一半 .固定定位 position: fixed; ()脱标 参考点:浏览器的左上角 作用:固定导航栏 返回顶部 小广 ...
- scrapy实现自动抓取51job并分别保存到redis，mongo和mysql数据库中
项目简介 利用scrapy抓取51job上的python招聘信息,关键词为“python”,范围:全国 利用redis的set数据类型保存抓取过的url,现实避免重复抓取: 利用脚本实现每隔一段时间, ...
- 2019牛客暑期多校训练营（第九场） E All men are brothers
传送门 知识点:并查集+组合数学 并查集合并操作可以理解为使得两个集合的人互相成为朋友,也就是两个集合并在了一起,答案是要求从所有人中挑出四个互相不是朋友的四个人,比较基础的组合数学知识,但因为每个集 ...
- 痞子衡嵌入式：恩智浦i.MX RTxxx系列MCU启动那些事（3）- Serial ISP模式(blhost)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RTxxx系列MCU的Serial ISP模式. 在上一篇文章 Boot配置(ISP Pin, OTP) 里痞子衡为大家 ...
- Spring Boot中使用Jpa的findOne方法不能传入id
最近通过慕课网学习spring boot,视频中通过jpa的findOne方法以id为参数查询出对应的信息, 而当我自己做测试的时候却发现我的findOne方法的参数没有Integer类型的id,而是 ...
- IDEA IntelliJ/ DataGrip 修改自动补全快捷键
系统默认的是Tab键,个人喜欢用空格键作为自动补全键,设置方法如下 Setting-->Keymap-->Editor Actions:Choose Lookup Item Replace ...