From d145ddc07e62cf67d795fe6fecdbcb76a8d980b9 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Thu, 13 Feb 2025 16:04:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20vite=20proxy=E4=BB=A3=E7=90=86=E8=BD=AC?=
 =?UTF-8?q?=E5=8F=91=E7=9A=84=E4=B8=80=E4=BA=9B=E6=8A=80=E5=B7=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/{ => md}/summer.md       |  0
 public/md/vite-proxy.md         | 89 +++++++++++++++++++++++++++++++++
 src/router/modules/demo.ts      |  4 ++
 src/style/reset.scss            |  5 ++
 src/utils/tools.ts              | 18 +++++++
 src/views/demo/module/index.vue |  9 ++--
 src/views/demo/viteProxy.vue    | 20 ++++++++
 7 files changed, 139 insertions(+), 6 deletions(-)
 rename public/{ => md}/summer.md (100%)
 create mode 100644 public/md/vite-proxy.md
 create mode 100644 src/views/demo/viteProxy.vue

diff --git a/public/summer.md b/public/md/summer.md
similarity index 100%
rename from public/summer.md
rename to public/md/summer.md
diff --git a/public/md/vite-proxy.md b/public/md/vite-proxy.md
new file mode 100644
index 0000000..804feb5
--- /dev/null
+++ b/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 和目标地址即可。
\ No newline at end of file
diff --git a/src/router/modules/demo.ts b/src/router/modules/demo.ts
index 96d7d9a..03273c9 100644
--- a/src/router/modules/demo.ts
+++ b/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
diff --git a/src/style/reset.scss b/src/style/reset.scss
index 9538b2d..20a31d1 100644
--- a/src/style/reset.scss
+++ b/src/style/reset.scss
@@ -269,4 +269,9 @@ div:focus {
         padding-left: 40px;
         list-style: disc;
     }
+    hr {
+        margin: 40px 0;
+        height: 10px;
+        background: #f5f5f5;
+    }
 }
diff --git a/src/utils/tools.ts b/src/utils/tools.ts
index 077434a..75829ee 100644
--- a/src/utils/tools.ts
+++ b/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));
+    });
+};
diff --git a/src/views/demo/module/index.vue b/src/views/demo/module/index.vue
index 0b8b7ac..5a88b81 100644
--- a/src/views/demo/module/index.vue
+++ b/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) => {
-        htmlStr.value = marked(res);
-    });
+getMarkdownContent('./md/summer.md').then((res) => {
+    htmlStr.value = marked(res);
 });
 </script>
diff --git a/src/views/demo/viteProxy.vue b/src/views/demo/viteProxy.vue
new file mode 100644
index 0000000..b90d187
--- /dev/null
+++ b/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>