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 ...
随机推荐
- python_day04
今日内容: 一.爬虫三部曲: 1.发送请求 2.解析数据 3.保存数据 4.解析详情页,获取视频地址 mport requests import re #正则模块 import uuid #uuid. ...
- PHP中接口与抽象类的异同点有哪些
接口与抽象类的相同点: 1.抽象类和接口都有抽象方法 2.抽象类和接口不能创建实例对象 3.抽象类和接口使用意义相同(定义一种规范) 接口与抽象类的不同点: 1.接口中的方法必须全要是抽象方法(不能用 ...
- H3C 交换机设置本地用户和telnet远程登录配置 v7 版本
H3C 交换机设置本地用户和telnet远程登录配置 v7版本 一.配置远程用户密码与本地用户一致 [H3C]telnet server en //开启Telnet 服务 [H3C]local-u ...
- 北冥'sfish
北冥咸鱼,其名为鲲.鲲之大,long long存不下.化而为鸟,其名为鹏.鹏之背,高精被卡废.怒而颓,其码若怪诞之吟.是咸鱼,颓废则将遇上cz.cz谁,大佬也.<大佬说>者,志奆者也.&l ...
- Python爬虫之Selenium的常用方法
1.单个元素的选取 find_element_by_id 通过标签属性Id查找元素 find_element_by_name 通过标签属性name查找元素 find_element ...
- 攻略前端面试官（一）：JS的数据类型和内存机制浅析
原文地址:http://rainykane.cn/2019/09/29/与K_K君一起攻略前端面试官(一):JS的数据类型和内存机制浅析/ 背就完事了 介绍:一些知识点相关的面试题和答案 使用姿势:看 ...
- 使用centos7安装PXE教程
PXE是一种电脑无盘(即没有硬盘)技术. 预启动执行环境(PXE)指的是那些使得IBM兼容计算机(经常是运行Windows系统)不需要硬盘或是启动软盘就能启动的方法. 通俗点讲就是配置好PXE以后可以 ...
- 系统默认的alert弹出框总会带有域名
最近在开发Hybrid APP时发现用系统默认的alert弹出框总会带有域名,用户体验就比较不好了.想了一种办法来解决就是覆盖alert的方法. (function(){ window.a ...
- springboot读取resource下的文件
public static String DEFAULT_CFGFILE = ConfigManager.class.getClassLoader().getResource("conf/s ...
- libcurl库浅析
先放上libcurl官方文档:链接 第一步:全局初始化 #include <curl/curl.h> CURLcode curl_global_init(long flags ); 在使用 ...