vue3打包接口地址(ip)可配置，全局暴露接口地址(ip)

最新推荐文章于 2024-07-08 16:50:09 发布

King's Blog

最新推荐文章于 2024-07-08 16:50:09 发布

阅读量2k

点赞数 1

文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_42566993/article/details/131260318

版权

在Vue3项目中，通过在public文件夹下创建config.json存储基础URL，然后在main.js中使用axios异步读取该配置，利用provide/inject机制使全局访问。打包后只需修改config.json即可更改接口地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概要

在vue3中打包后，设置接口地址(ip)可配置

整体流程

在 publlic 文件夹中增加 config.json 文件
在这里插入图片描述

{
  "baseURL": "https://www.dev-api.com"
}

在 main.js 中使用 axios 异步获取 config.json中的地址，并使用 provide 让 vue 全局使用。
在这里插入图片描述

...
const app = createApp(App)

axios.get('./config.json').then(res => {
  const baseURL = res.data.baseURL
  app.provide('global', {
    baseURL
  })
  app.use(Antd).mount('#app')
})

组件中使用 inject使用
在这里插入图片描述

import { inject } from 'vue';

const global = inject('global')
console.log(global.baseURL);

这样，在打包后，直接修改 config.json 文件即可修改接口地址，快去试试吧~

技术细节

！！注意app的注册位置！！

const app = createApp(App)

axios.get('./config.json').then(res => {
  const baseURL = res.data.baseURL
  app.provide('global', {
    baseURL
  })
  // 这一块不能写作axios外面，因为baseURL使异步获取的
  app.use(Antd).mount('#app')
})