如何在启动 Vue 程序之前读取本地静态文件内容

简介: 有这样一个需求,就是希望通过本地的 Json 文件来写入一些内容,比如请求后端接口的 API 前缀,我们在 public 目录下面新建一个 project.config.json 文件来做一些配置项

有这样一个需求,就是希望通过本地的 Json 文件来写入一些内容,比如请求后端接口的 API 前缀,我们在 public 目录下面新建一个 project.config.json 文件来做一些配置项:

{
  "baseUrl": "http://192.168.199.201:10000/"
}


这样有一个好处就是项目打包发布之后的文件也可以通过更改这个静态文件来改变一些配置项,省的因为频繁更改配置,而需要重新打包

然后我们在程序的主文件 main.js 中来通过请求这个静态文件,然后将读取的结果存在 Vue 的全局属性 $config 下面

async function getConfig() {
  return axios.get("./project.config.json").then((res) => {
    Vue.prototype.$config = res.data
  })
}


那么接下来我们还需要在 Vue 程序实例化之前就执行 getConfig() 方法 ,这样才能确保我们在请求后端接口的时候能提前拿到 API 的 baseUrl

async function createApp() {
  new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount("#app")
}
(async function() {
  await getConfig()
  await createApp()
})()


是不是很灵活,应该还有很多的场景能够用到该方法。



目录
相关文章
|
1天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
9 2
|
1天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【3.项目路由的分析】
vue尚品汇商城项目-day01【3.项目路由的分析】
6 1
|
1天前
|
JavaScript 前端开发 数据安全/隐私保护
vue尚品汇商城项目-day01【5.路由组件的搭建】
vue尚品汇商城项目-day01【5.路由组件的搭建】
5 0
vue尚品汇商城项目-day01【5.路由组件的搭建】
|
1天前
|
JavaScript
vue尚品汇商城项目-day01【6.Footer组件的显示与隐藏】
vue尚品汇商城项目-day01【6.Footer组件的显示与隐藏】
7 0
|
1天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【7.路由传参】
vue尚品汇商城项目-day01【7.路由传参】
7 0
|
1天前
|
JavaScript API
vue尚品汇商城项目-day02【vue插件-13.nprogress进度条的使用】
vue尚品汇商城项目-day02【vue插件-13.nprogress进度条的使用】
5 0
|
1天前
|
JavaScript
vue尚品汇商城项目-day02【14.vuex状态管理库】
vue尚品汇商城项目-day02【14.vuex状态管理库】
5 0
|
3天前
|
JavaScript
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
|
3天前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
14 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
2天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
16 1