Vue3在打包后自由修改接口地址

您所在的位置：网站首页 › vue打包后配置接口地址 › Vue3在打包后自由修改接口地址

Vue3在打包后自由修改接口地址

2024-04-07 22:21| 来源: 网络整理| 查看: 265

需求

vue3项目，后台接口地址需要在打包后自由修改，每次修改后再打包太过麻烦

方案

public文件夹放json配置文件 main.js里读取json配置文件并修改axios全局BaseUrl，且注册全局变量以此达到修改了axios接口地址并且能够在vue文件里自由访问接口地址的效果

实例

main.js

import {createApp} from 'vue' import store from '@/store' import App from './App.vue' import router from './router/index.js' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import './assets/css/material-dashboard.min.css' import VMdEditor from '@kangc/v-md-editor'; import '@kangc/v-md-editor/lib/style/base-editor.css'; import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'; import '@kangc/v-md-editor/lib/theme/style/github.css'; // highlightjs import hljs from 'highlight.js'; import axios from 'axios' import requests from "@/axios"; VMdEditor.use(githubTheme, { Hljs: hljs, }); function getServerConfig() { axios.get('/config.json').then(res => { const app = createApp(App) const server = process.env.NODE_ENV !== 'development' ? res.data.BASE_URL_PROD : res.data.BASE_URL_DEV requests.defaults.baseURL = server app.provide('server', server) app.use(ElementPlus).use(store).use(router).use(VMdEditor).mount('#app') }) } getServerConfig()

axios/index.js

import axios from 'axios' const requests = axios.create({ baseURL: "", timeout: 15000, // 请求超时时间 withCredentials: true }) export default requests 如何使用

在vue文件中

import {inject} from 'vue' console.log(inject('server'))

在接口js文件中如api/user.js

import requests from "@/axios"; import qs from 'qs' /** * 获取当前登录用户的信息 * @returns {AxiosPromise} */ export function getMe() { return requests({ url: '/api/user/getMe', method: 'get', }) }

【本文地址】

Vue3在打包后自由修改接口地址

Vue3在打包后自由修改接口地址

今日新闻

推荐新闻