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

概要

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

整体流程

1. 在 publlic 文件夹中增加 config.json 文件
   

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

2. 在 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')
   })
   

3. 组件中使用 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')
})