add:组件使用axios请求方法，新增代理

Author: LewisLen

src/App.vue

@@ -27,6 +27,7 @@
 #nav a {
   font-weight: bold;
   color: #2c3e50;
+  font-size: 24px;
 }
 
 #nav a.router-link-exact-active {

src/components/HelloWorld.vue

@@ -56,6 +56,11 @@ export default {
       ],
     };
   },
+  created() {
+    this.$http.get("/api/productList").then((res) => {
+      console.log(res);
+    });
+  },
 };
 </script>
 <style scoped>

src/main.js

@@ -2,8 +2,10 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import axios from "./api/http";
 
 Vue.config.productionTip = false;
+Vue.prototype.$http = axios;
 // 检查性能-配合Vue Performance Devtool插件使用
 // 生产上最好关闭
 Vue.config.performance = true;

vue.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  // 选项...
+  devServer: {
+    proxy: {
+      "/api": {
+        target: "http://172.20.10.5:3999",
+        changeOrigin: true,
+        pathRewrite: { "^/api": "" },
+      },
+    },
+  },
+};