update

vite.config.js

@@ -21,5 +21,13 @@ export default env => {
         "@": path.resolve(__dirname, "src"),
       },
     },
+    server: {
+      proxy: {
+        "/api": {
+          target: "http://dev.erp.com",
+          changeOrigin: true,
+        },
+      },
+    },
   });
 };

项目开发手册.md

@@ -100,7 +100,7 @@ npm run dev
 
   > 我们使用模块化的方式来管理页面，比如用户管理、权限管理等模块，每个模块下可能有多个页面，所以每个模块都要创建一个目录
 
-  - 在views目录中创建home目录（代表home模块），home目录中创建index.vue，index.vue代表home模块的主页面
+  在views目录中创建home目录（代表home模块），home目录中创建index.vue，index.vue代表home模块的主页面
 
   ```vue
   <template>
@@ -108,7 +108,7 @@ npm run dev
   </template>
   ```
 
-  - 同样的方式创建一个login模块
+  同样的方式创建一个login模块
 
   ```vue
   <template>
@@ -127,7 +127,7 @@ npm run dev
 
   > 路由配置就是配置views模块中的页面通过什么地址来访问，路由我们也使用模块化管理，views中有多少模块就创建多少路由配置文件，此外还需要一个index.js来统一分配路由模块
 
-  - router目录中创建modules目录， modules目录中创建home.js和login.js
+  router目录中创建modules目录， modules目录中创建home.js和login.js
 
   ```js
   // home.js
@@ -155,7 +155,7 @@ npm run dev
   ]
   ```
 
-  - router目录中创建index.js
+  router目录中创建index.js
 
   ```js
   // index.js
@@ -242,7 +242,7 @@ npm run dev
 
   > 状态管理也使用模块化的方式
 
-  - 在store目录中创建modules目录，modules中创建一个模块，比如叫user.js
+  在store目录中创建modules目录，modules中创建一个模块，比如叫user.js
 
   ```js
   // user.js
@@ -254,7 +254,7 @@ npm run dev
   };
   ```
 
-  - 在store目录中创建index.js
+  在store目录中创建index.js
 
   ```js
   //index.js
@@ -334,9 +334,9 @@ npm run dev
 
   > 项目中我们调用接口的时候，有可能有很多页面都会调用同一个接口，所以我们把所有的接口统一进行模块化管理
 
-  - 在src目录中创建api目录，用来存放所有的接口
+  在src目录中创建api目录，用来存放所有的接口
 
-  - 在api目录中创建一个模块login.js，该文件包括跟登录注册相关的所有接口
+  在api目录中创建一个模块login.js，该文件包括跟登录注册相关的所有接口
 
   ```js
   // login.js
@@ -354,7 +354,7 @@ npm run dev
   // 其它接口...
   ```
 
-  - 在页面中调用登录接口
+  在页面中调用登录接口
 
   > 在views/login/index.vue中：
 
@@ -386,11 +386,24 @@ npm run dev
   </script>
   ```
 
+### 跨域管理
+
+当前端调用后端接口的时候，假设后端接口的域名是`http://dev.erp.com`，那`http://localhost`访问`http://dev.erp.com`是会跨域的，这时候我们就要在vite.config.js中设置代理
+
+```js
+// vite.config.js增加如下配置
+server: {
+  proxy: {
+    "/api": {
+      target: "http://dev.erp.com",
+      changeOrigin: true,
+    },
+  },
+},
+```
 
 ### mock管理
 
-> 上面调用登录接口，其实是404，因为现在还没有后端接口
->
 > 当后端接口没有开发完成的时候，前端就需要根据接口文档mock数据进行开发
 >
 > vite中可以使用vite-plugin-mock插件创建mock服务
@@ -467,12 +480,11 @@ npm run dev
     },
   ]
   ```
-```
+
 
 这个时候我们访问`http://localhost:3000/api/get`，可以看到返回的mock数据了
 
-
-#### 封装axios
+### 封装axios
 
 > 当我们登录成功之后，后端其实会返回一个token（token就是用来做登录认证的），后续所有请求都需要带上这个token，后端校验token是否有效
 >