Vue-cli3.0读取外部化配置文件来修改公共路径
之前我写过一篇通过vue-cli3.0打包发布到nginx配置代理转发的博客,链接在此:https://www.cnblogs.com/jdWu-d/p/12197156.html,正常来说也是正确的,但不正常之处在了甲方还用了F5负载均衡和gateway来代理转发。所以之前我认为的请求->nginx转发代理->后端服务,实际上是请求->nginx代理转发->F5->gateway代理转发->后端服务,所以nginx代理转发是多余的,浪费效率,目前的nginx仅仅作为web发布容器。被架构师一顿P,还是太年轻了,那就改吧。
以我目前项目的vue-cli3.0为例,读取外部化配置文件来修改公共路径,vue-cli2.0也大差不差。首先,在public目录下,新建一个文件,我命名为serverConfig.json,具体如图1所示,里面配了一个baseURL。
图1 外部化配置文件serverConfig.json
然后,在main.js里面定义一个读取这个文件的方法,在初始化的时候读取这个文件。
import Vue from 'vue' import App from './App' // 发送请求 Vue.prototype.$axios = axios; function getServerConfig () { return new Promise ((resolve, reject) => { axios.get('./serverConfig.json').then(data => {
console.log("读取外部化配置文件>>>>>>>>") console.log(data) // 是否成功读取需要的配置项 for (let key in data) { Vue.prototype["$"+key] = data[key]; } console.log(Vue.prototype.$baseURL) // 验证是否已经把属性挂载在了Vue的原型上 resolve(); }).catch(error => { console.log(error); reject() }) }) } async function init() { await getServerConfig(); } let app = new Vue({ router, store, render: h => h(App), created() { init(); }, }).$mount('#app') export default app;
建议:如果写法为Vue.prototype[key] = data[key];然后别的页面,直接this.key也是可以调用的。但是我个人建议写法为Vue.prototype["$"+key] = data[key];那这样别的页面调用的时候就是this.$key,这样就可以和页面里的data函数里调用数据时的this.key区别开来。
图2 系统初始化页面读取外部化配置文件控制台打印输出
然后,在需要请求的页面这样写:
this.$axios.get(this.$baseURL + '/a/b').then(data => { //to do });
可以参考下我写的:
图3 参考代码
图4 参考代码执行后的结果
确认无误,打包,在dist包中能找到之前我们的配置文件,如图5所示。之后的公共路径如果有变动就可以前端包里的外部化配置文件里直接修改,且修改之后不需要再次打包。利用好这个功能,可以配置很多需要外部修改的属性。
图5 前端dist包里的配置文件serverConfig.json
这里有个问题得记录下,直接点开dist包的html页面读取外部化配置文件会报错,如图6所示,报错信息提示很明显了,这是因为跨域只支持http,data,chrome,chrome-extension(chrome扩展插件),https等协议,而我们这个是file协议。所以不要慌,当我们把这个包丢到服务器上的时候走的就是http协议就是ok的了。
图6 file协议跨域报错
原文地址:https://www.cnblogs.com/jdWu-d/p/12687396.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Java 操作 ElasticSearch
- Docker部署常见应用
- Spring 中实现自动注入的几种方式
- Spring 容器的创建过程
- 04 Spring Boot 整合MyBatis
- OpenFeign服务调用
- Windows10安装JDK14
- IDEA 配置 maven 完美解决方案
- 06 Spring Boot 整合Shrio
- List集合转化为数组
- 小心,99%的面试者,都倒在了这里。一文带你了解spring全家桶
- 阿里P9整理Java 高频面试题聊一聊 JUC 下的 LinkedBlockingQueue
- Java环境配置
- 一次django内存异常排查
- Hystrix服务降级-服务熔断