feat: vite proxy代理转发的一些技巧

public/md/vite-proxy.md

@@ -0,0 +1,89 @@
+# vite proxy 多个代理相同逻辑怎么简写
+
+在 Vite 中配置多个代理可以通过简化代码来提高可读性和维护性。以下是如何将多个代理配置相同逻辑的简写方法。
+
+### 1. **基础配置**
+
+假设你有多个代理需要指向相同的目标，可以使用一个函数来生成代理配置。
+
+### 2. **示例代码**
+
+```javascript
+import { defineConfig } from 'vite';
+
+const createProxy = (prefix) => ({
+    target: 'http://example.com',
+    changeOrigin: true,
+    rewrite: (path) => path.replace(new RegExp(`^/${prefix}`), ''),
+});
+
+export default defineConfig({
+    server: {
+        proxy: {
+            '/api1': createProxy('api1'),
+            '/api2': createProxy('api2'),
+            '/api3': createProxy('api3'),
+        },
+    },
+});
+```
+
+### 3. **说明**
+
+- `createProxy` 函数接收一个前缀参数，并返回一个完整的代理配置对象。
+- 在 `server.proxy` 中，你可以调用 `createProxy` 来生成每个代理的配置，从而避免重复代码。
+
+### 4. **扩展**
+
+如果有更多的相似逻辑需求，可以进一步扩展 `createProxy` 函数，增加其他选项，保持代码的灵活性和可读性。
+
+### 总结
+
+通过创建一个可复用的函数来配置代理，可以大大简化 Vite 的代理配置，使代码更清晰可维护。
+
+---
+
+# vite 里面设置代理转发，判断如果请求地址有http://xxxx/api就跳过，如果请求地址为/api就代理怎么实现
+
+在 Vite 中设置代理并根据请求地址进行判断，可以通过自定义代理配置来实现。你可以使用 `configureServer` 钩子来更灵活地控制请求的转发逻辑。
+
+以下是一个示例，展示如何实现这个功能：
+
+### 示例代码
+
+```javascript
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+    server: {
+        proxy: {
+            '/api': {
+                target: 'http://your-target-url.com', // 替换为你的目标地址
+                changeOrigin: true,
+                configure: (proxy) => {
+                    proxy.on('proxyReq', (proxyReq, req, res) => {
+                        // 判断请求地址
+                        if (req.originalUrl.startsWith('http://xxxx/api')) {
+                            // 如果是http://xxxx/api，跳过代理
+                            proxyReq.abort(); // 终止请求
+                        }
+                    });
+                },
+            },
+        },
+    },
+});
+```
+
+### 说明
+
+1. **`target`**: 设置为你的目标 API 地址。
+2. **`changeOrigin`**: 将请求头中的 Origin 更改为目标 URL。
+3. **`configure`**: 函数允许你访问代理实例并自定义请求处理。
+4. **`proxy.on('proxyReq', ...)`**: 监听代理请求事件，在此处可以对请求进行判断。
+5. **`req.originalUrl.startsWith('http://xxxx/api')`**: 判断请求的 URL 是否以指定的地址开头。
+6. **`proxyReq.abort()`**: 如果条件匹配，则终止请求，不进行代理。
+
+### 总结
+
+通过上述配置，你可以根据请求的 URL 判断是否进行代理，从而实现特定条件下的请求跳过。根据实际需求调整 URL 和目标地址即可。

src/router/modules/demo.ts

@@ -60,6 +60,10 @@ const titleArr = [
         key: 'module',
         title: 'CommonJS AMD CMD ESM总结',
     },
+    {
+        key: 'viteProxy',
+        title: 'vite中设置代理转发',
+    },
 ];
 
 // @/views/demo/**/*.vue

src/style/reset.scss

@@ -269,4 +269,9 @@ div:focus {
         padding-left: 40px;
         list-style: disc;
     }
+    hr {
+        margin: 40px 0;
+        height: 10px;
+        background: #f5f5f5;
+    }
 }

src/utils/tools.ts

@@ -82,3 +82,21 @@ export const generateUUID = () => {
         return v.toString(16);
     });
 };
+
+/** 获取远程资源markdown内的内容 */
+export const getMarkdownContent = (filePath) => {
+    return new Promise((resolve, reject) => {
+        fetch(filePath, {
+            method: 'GET',
+        })
+            .then((result) => {
+                result
+                    .text()
+                    .then((res) => {
+                        resolve(res);
+                    })
+                    .catch((err) => reject(err));
+            })
+            .catch((err) => reject(err));
+    });
+};

src/views/demo/module/index.vue

@@ -11,14 +11,11 @@
 <script setup>
 import { ref } from 'vue';
 import { marked } from 'marked';
+import { getMarkdownContent } from '@/utils/tools';
 
 const htmlStr = ref('');
 
-fetch('./summer.md', {
-    method: 'GET',
-}).then((result) => {
-    result.text().then((res) => {
+getMarkdownContent('./md/summer.md').then((res) => {
     htmlStr.value = marked(res);
-    });
 });
 </script>

src/views/demo/viteProxy.vue

@@ -0,0 +1,20 @@
+<template>
+    <el-card>
+        <div
+            class="md-main"
+            v-html="htmlStr"
+        ></div>
+    </el-card>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { marked } from 'marked';
+import { getMarkdownContent } from '@/utils/tools';
+
+const htmlStr = ref('');
+
+getMarkdownContent('./md/vite-proxy.md').then((res) => {
+    htmlStr.value = marked(res);
+});
+</script>