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 ...
随机推荐
- 反汇编objc分析__block
"You can specify that an imported variable be mutable—that is, read-write— by applying the __bl ...
- LVM弹性硬盘
LVM机制的基本概念 PV(物理卷) ----由多个pe组成 VG(卷组) LV(逻辑卷) 基本命令: 如: 服务器新增一块大小为1T的SCSI的硬盘(sdb) ,创建一个名字为(ceshi)的逻辑分 ...
- ETCD:单机单节点
原文地址:Setting up local clusters 设置单节点集群 对于测试环境与开发环境,最快速与简单的方式是配置一个本地集群.对于生产环境,参考集群部分. 本地单节点集群 启动一个集群 ...
- Spring 5 响应式编程
要点 Reactor 是一个运行在 Java8 之上的响应式流框架,它提供了一组响应式风格的 API 除了个别 API 上的区别,它的原理跟 RxJava 很相似 它是第四代响应式框架,支持操作融合, ...
- K8s 集群节点在线率达到 99.9% 以上，扩容效率提升 50%，我们做了这 3 个深度改造
点击下载<不一样的 双11 技术:阿里巴巴经济体云原生实践> 本文节选自<不一样的 双11 技术:阿里巴巴经济体云原生实践>一书,点击上方图片即可下载! 作者 | 张振(守辰) ...
- scikit-learn_cookbook1: 高性能机器学习-NumPy
源码下载 在本章主要内容: NumPy基础知识 加载iris数据集 查看iris数据集 用pandas查看iris数据集 用NumPy和matplotlib绘图 最小机器学习配方 - SVM分类 介绍 ...
- ssm通用 POM
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven ...
- css三大特效之层叠性
css三大特效之层叠性
- 【数据结构】之链表（C语言描述）
链表是线性表的一种,是一种物理存储单元上非连续的存储结构,链表中的数据元素之间是通过指针链接实现的. 链表由一系列节点组成,节点可以在运行时动态的生成. 链表中国的每个节点分为两部分:一部分是存储数据 ...
- LAMP架构介绍、MySQL、MariaDB介绍、MySQL安装
5月23日任务 课程内容: 11.1 LAMP架构介绍11.2 MySQL.MariaDB介绍11.3/11.4/11.5 MySQL安装扩展mysql5.5源码编译安装 http://www.ami ...