axios.defaults.baseURL无效,启动后依然是vue的默认端口

刚接触前端,想使用fastmock网站的模拟接口,设置axios.defaults.baseURL不起作用,启动后依然是vue的默认端口,搞不清楚什么情况

报错:
GET http://localhost:8080/user/login 404 (Not Found)
Uncaught (in promise) Error: Request failed with status code 404

img

img

文件:

// main.js
import router from './router'
import store from './store'
import app from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

createApp(app).use(store).use(router).use(VueAxios, axios).mount('#app')

axios.defaults.baseURL = 'https://www.fastmock.site/mock/41ad676f207d8fa9d618b65a76b2684e/api';
axios.defaults.timeout = 5000;
// App.vue
<template>
  <div class="app">
    <router-view></router-view>
  </div>
</template>
<script>
export default{
        name:'app',
        data(){
          return {
            res:{}
          }
        },
        mounted(){
          this.axios.get('/user/login').then((res) => {
            this.res = res;
          })
        }
    }
</script>
// vue.config.js
module.exports = {
    devServer: {
        proxy: {
            '^/api': {
                target: 'https://www.fastmock.site/mock/41ad676f207d8fa9d618b65a76b2684e/api',
                pathRewrite: {
                    '^/api': ''
                },
                changeOrigin: true,
                secure: false
            }
        }
    }
}

平台上的模拟接口也设置好了,实在是不知道什么情况

axios.defaults.baseURL里面是配置你调用服务端的基础路径

img

就是你所有api共有的域名 其他正常写就行

解决了,在App.vue文件重新引用axios和重新配置baseURL就行了,但是在main.js已经引用好了vue-axios,应该是全局应用才对,不知道为什么不起作用

要使用绝对路径,不能使用相对路径:

this.axios.get('http://IP:端口/user/login').then((res) => {
            this.res = res;
          })