【vue3】对axios进行封装，方便更改路由并且可以改成局域网ip访问（附代码）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【vue3】对axios进行封装，方便更改路由并且可以改成局域网ip访问（附代码）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

对axios封装是在main.js里面进行封装，因为main.js是一个vue项目的入口

步骤：

【vue3】对axios进行封装，方便更改路由并且可以改成局域网ip访问（附代码）,vue3+Diango+Mysql,前端,javascript,vue.js

在1处创建一个axios实例为http，baseURL是基础地址（根据自己的需求写），写了这个在vue界面调用后端接口时只用在post请求处写路由地址就可以了
在2处将创建的axios实例挂到app上
在3处，vue页面进行调用后端接口时只写后端路由就好（我后端使用的Django）

代码：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import axios from 'axios'
// createApp(App).use(store).use(router).mount('#app')

// // 创建基础url
const http = axios.create({
  baseURL: 'http://127.0.0.1:8000/'
})

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.use(store)
app.config.globalProperties.$http = http
app.mount('#app')
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

【vue3】对axios进行封装，方便更改路由并且可以改成局域网ip访问（附代码）,vue3+Diango+Mysql,前端,javascript,vue.js

这是Django服务器启动成功的提示信息。它表示你已经在本地计算机上启动了一个开发服务器，可以通过http://0.0.0.0:8000/访问它。其中0.0.0.0是一个通配符地址，它表示可以从任何网络接口（例如本地主机或公共IP）访问服务器。文章来源地址https://www.toymoban.com/news/detail-655603.html

到了这里，关于【vue3】对axios进行封装，方便更改路由并且可以改成局域网ip访问（附代码）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！