axios添加为全局变量 添加默认请求前缀地址

src/main.js

@@ -3,8 +3,13 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import installElementPlus from './plugins/element'
+import axios from 'axios'
+
+axios.defaults.baseURL = 'http://localhost:3000'
 
 const app = createApp(App)
 installElementPlus(app)
 
 app.use(store).use(router).mount('#app')
+app.config.globalProperties.$axios = axios
+

src/views/Article.vue

@@ -2,13 +2,15 @@
   <el-row>
     <el-col :span="14" :offset="5">
       <el-container>
-        <el-header style="font-size: 35px;">{{article.article_title}}</el-header>
-        <el-main style="text-align:left;">
+        <el-header style="font-size: 35px">
+          {{ article.article_title }}
+        </el-header>
+        <el-main style="text-align: left">
           <el-container>
             <el-header>
               <div id="avatar">
                 <el-avatar :size="40" :src="circleUrl"></el-avatar>
-                <div id="author_name">{{authorName}}</div>
+                <div id="author_name">{{ authorName }}</div>
               </div>
             </el-header>
             <el-main v-html="content"></el-main>
@@ -19,43 +21,45 @@
     </el-col>
   </el-row>
 </template>
+
 <script>
-import axios from 'axios'
+
 export default {
   components: [],
-  data () {
+  data() {
     return {
       article: {},
       articleID: 0,
-      content: '',
-      authorName: '',
-      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
-    }
+      content: "",
+      authorName: "",
+      circleUrl:
+        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
+    };
   },
-  mounted () {
-    this.articleID = this.$route.params.id
-    this.getArticle(this.articleID)
+  mounted() {
+    this.articleID = this.$route.params.id;
+    this.getArticle(this.articleID);
   },
   methods: {
-    getArticle (id) {
-      axios.get(`http://localhost:3000/articles/${id}`).then(response => {
-        const result = response.data[0]
-        this.article = result
-        this.content = result.content
-        this.getAuthor(result.author_id)
-      })
+    getArticle(id) {
+      this.$axios.get(`/articles/${id}`).then((response) => {
+        const result = response.data[0];
+        this.article = result;
+        this.content = result.content;
+        this.getAuthor(result.author_id);
+      });
     },
-    getAuthor (id) {
-      axios.get(`http://localhost:3000/users/info/${id}`).then(response => {
-        console.log(response)
-        this.authorName = response.data[0].user_name
-      })
-    }
-  }
-}
+    getAuthor(id) {
+      this.$axios.get(`/users/info/${id}`).then((response) => {
+        console.log(response);
+        this.authorName = response.data[0].user_name;
+      });
+    },
+  },
+};
 </script>
 <style>
-#avatar{
+#avatar {
   text-align: left;
   margin-top: 10px;
   margin-bottom: 20px;

src/views/Editor.vue

@@ -35,7 +35,6 @@
 </template>
 <script>
 import tinymce from '@tinymce/tinymce-vue'
-import axios from 'axios'
 
 export default {
   name: 'Editor',
@@ -58,7 +57,7 @@ export default {
   methods: {
     updateContent () {
       if (this.title !== '') {
-        axios.post('http://localhost:3000/articles', {
+        this.$axios.post('/articles', {
           title: this.title,
           content: this.content
         }).then(r => {