查看原文

配置步骤

第一步:在 static 文件夹中新建一个 config.json,把你要写的配置写入
{
// 基本访问地址
"BASE_URL": "http://webhmy.com"
}
第二步:在 main.js 中请求定义的配置文件,并放到 Vue.prototype 中,使全局可访问,注意,这里把new Vue()放在请求里执行,是防止请求与页面渲染之间的时间差异化导致值获取不到,因此这样比较保险。
// 定义外部接口可配置
import axios from 'axios'
  axios.get('/static/config.json').then((res) => {
    // 基础地址
    Vue.prototype.BASE_URL = res.BASE_URL;
    new Vue({
      el: '#app',
      router,
      store,
      components: {
        App
      },
      template: '<App/>'
    })
  })
打包修改

执行 npm run build 可以看到打包文件夹 static 文件夹下的 config.json,之后可以修改配置,刷新页面即可。

在这里插入图片描述

【补充】
因为请求和打包操作的时差性,哪怕它是请求本地的文件,但是有时发现它的请求会比我们系统的第一个请求慢了,这个时候就会失效。

解决方法:相信我们的项目中都对请求进行了一些封装操作,只要将对应的baseURL的值改成实时获取Vue.prototype.BASE_URL的值,就可以保证接口请求能够准确获取到了

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐