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 ...
随机推荐
- elementui分页记录，reserve-selection
第一步:在<el-table></el-table>标签中加上 :row-key="getRowKeys" 第二步:在<el-table-column ...
- Win 使用终端创建mysql数据库及使用（5）
删除你创建过的数据库newsql里面的所有表 这里必须安装了mysql,并且知道用户名密码IP地址.因为我用的window,所以只介绍Win使用cmd创建的方式 首先windown+R 出现窗口输入c ...
- Crontab爬虫定时执行
- HT Vue 集成
(本文中 dataModel = dm = 数据容器, gv = graphView = g2d = 2D 视图) 初始化项目 使用 vue-cli 生成项目.生成注意以下几个问题 1. 建议手动配置 ...
- 【Android - 控件】之MD - NavigationView的使用
NavigationView是Android 5.0新特性——Material Design中的一个布局控件,可以结合DrawerLayout使用,让侧滑菜单变得更加美观(可以添加头部布局). Nav ...
- CCNA 之 八 交换基础 VLAN TRUNK VTP
交换基础 主要知识点: 二层交换基础 Vlan的概念 Trunk的概念 VTP 二层交换基本配置 首先来看下园区网分层结构 交换机的主要功能: Address learning 学习MAC地址 会维护 ...
- Centos 6.x Openssh 升级 7.7p1 版本
OpenSSH 升级 目前在一家金融公司上班,正好赶上金融公司各种暴雷,本人心里慌慌的. 然后就是金融公司要进行的最低的三级等保评测,各种修改系统安全,密码强度.WAF.防火墙等各种. 评测公司对我司 ...
- 算法上机题目mergesort，priority queue，Quicksort，divide and conquer
1．Implement exercise 2.3-7. 2． Implement priority queue. 3． Implement Quicksort and answer the follo ...
- 设置更改root密码、连接mysql、mysql常用命令
6月19日任务 13.1 设置更改root密码13.2 连接mysql13.3 mysql常用命令 13.1 设置更改root密码 使用场景:例如长时间不用忘记了mysql的root密码,那么就需要去 ...
- npm切换成淘宝镜像源
0-前言 我们都知道node下载第三方依赖包是从国外服务器下载,不是速度奇慢就是下载异常,切换成国内的淘宝镜像源很有必要: 1-切换方法 $ npm config set registry https ...