概要
在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')
})