之前我写过一篇通过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协议跨域报错

vue-cli3.0读取外部化配置文件来修改公共路径的更多相关文章

  1. vue cli3.0 结合echarts3.0和地图的使用方法

    echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...

  2. 解决vue/cli3.0 语法验证规则 ESLint: Expected indentation of 2 spaces but found 4. (indent)

    当你使用vue/cli3.0的时,有可能出现雁阵规则 ESLint: Expected indentation of 2 spaces but found 4. (indent) 解决方法 1.在vu ...

  3. 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题

    2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...

  4. vue cli3.0打包

    1.vue cli3.0需要在项目根目录下配置webpack  包括反向代理以及打包文件路径 const webpack = require("webpack"); module. ...

  5. 使用VUE CLI3.0搭建项目vue2+scss+element简易版

    1.安装Vue CLI 3 //三选一即可cnpm install -g @vue/cli npm install -g @vue/cli yarn global add @vue/cli 注意: 1 ...

  6. vue cli3.0快速搭建项目详解(强烈推荐)

    这篇文章主要介绍下vue-cli3.0项目搭建,项目结构和配置等整理一下,分享给大家. 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cl ...

  7. vue cli3.0配制axios代理

    今天学习时,想访问网易新闻接口,结果显而易见,因为跨域被浏览器拒绝了. 去网上找一下结果一开始找到的是2.x版本的配置,生硬的放进去,给我各种报错.编译阶段就炸了.浪费好多时间 再按3.0版本去搜索才 ...

  8. vue cli3.0使用svg全过程

    VUE-cli3使用 svg-sprite-loader svg-sprite-loader 的插件,用来根据导入的 svg 文件自动生成 symbol 标签并插入 html 1.安装依赖 npm i ...

  9. vue cli3.0 首次加载优化

    项目经理要求做首页加载优化,打包后从十几兆优化到两兆多,记下来怕下次忘记 运行report脚本 可看到都加载了那些内容,在从dist文件中index.html 查看首次加载都加载了那些东西,如下图:然 ...

随机推荐

  1. 详解 Set接口

    (请关注 本人"集合"总集篇博文--<详解 Collection接口>) 在Collection接口的子接口中,最重要的,也是最常见的两个-- List接口 和 Set ...

  2. file_put_contens小trick

    file_put_contents tricks 0x01 trick1 来自于P神的实例: <?php $text = $_GET['text']; if(preg_match('[<& ...

  3. 关于log4j、jul、jcl、slf4j等等日志组件的理解

    日志组件: 我们经常在开发项目的时候,需要打印记录项目过程中的一些日志.那我们经常大概会用到 log4j.jul.jcl.slf4j.simple.nop.logback 等等,那我们就详细介绍下这些 ...

  4. 微信网页授权报code been used, hints: [ req_id: XYv1Ha07042046 ]

    先贴上代码: public function index() { $code = input('get.code'); $tool = new Wxtool(); if (empty($code)) ...

  5. Redis来限制用户 ------------IP某个时间段内访问的次数

    $redis = new Redis(); $redis->connect('127.0.0.1', 6379); //获取客户端真实ip地址 function get_real_ip(){ s ...

  6. SVN diff

    http://svnbook.red-bean.com/en/1.6/svn.ref.svn.c.diff.html Name svn diff (di) — This displays the di ...

  7. MySQL join的7种理论及SQL写法

    转载于    https://www.cnblogs.com/dinglinyong/p/6656315.html 建表 在这里呢我们先来建立两张有外键关联的张表. CREATE DATABASE d ...

  8. 使用ExecutorService来停止线程服务

    文章目录 使用shutdown 使用shutdownNow 使用ExecutorService来停止线程服务 之前的文章中我们提到了ExecutorService可以使用shutdown和shutdo ...

  9. 后缀数组SA

    复杂度:O(nlogn) 注:从0到n-1 const int maxn=1e5; char s[maxn]; int sa[maxn],Rank[maxn],height[maxn],rmq[max ...

  10. Golang——Cron 定时任务

    开门见山写一个 package main import ( "fmt" "github.com/robfig/cron" "log" &qu ...