feat(projects): support proxy log in terminal

.env

@@ -51,3 +51,6 @@ VITE_STORAGE_PREFIX=SOY_
 
 # used to control whether the program automatically detects updates
 VITE_AUTOMATICALLY_DETECT_UPDATE=Y
+
+# show proxy url log in terminal
+VITE_PROXY_LOG=Y

build/config/proxy.ts

@@ -1,4 +1,6 @@
-import type { ProxyOptions } from 'vite';
+import type { HttpProxy, ProxyOptions } from 'vite';
+import { bgRed, bgYellow, green, lightBlue } from 'kolorist';
+import { consola } from 'consola';
 import { createServiceConfig } from '../../src/utils/service';
 
 /**
@@ -12,23 +14,40 @@ export function createViteProxy(env: Env.ImportMeta, enable: boolean) {
 
   if (!isEnableHttpProxy) return undefined;
 
+  const isEnableProxyLog = env.VITE_PROXY_LOG === 'Y';
+
   const { baseURL, proxyPattern, other } = createServiceConfig(env);
 
-  const proxy: Record<string, ProxyOptions> = createProxyItem({ baseURL, proxyPattern });
+  const proxy: Record<string, ProxyOptions> = createProxyItem({ baseURL, proxyPattern }, isEnableProxyLog);
 
   other.forEach(item => {
-    Object.assign(proxy, createProxyItem(item));
+    Object.assign(proxy, createProxyItem(item, isEnableProxyLog));
   });
 
   return proxy;
 }
 
-function createProxyItem(item: App.Service.ServiceConfigItem) {
+function createProxyItem(item: App.Service.ServiceConfigItem, enableLog: boolean) {
   const proxy: Record<string, ProxyOptions> = {};
 
   proxy[item.proxyPattern] = {
     target: item.baseURL,
     changeOrigin: true,
+    configure: (_proxy: HttpProxy.Server, options: ProxyOptions) => {
+      _proxy.on('proxyReq', (_proxyReq, req, _res) => {
+        if (!enableLog) return;
+
+        const requestUrl = `${lightBlue('[proxy url]')}: ${bgYellow(` ${req.method} `)} ${green(`${item.proxyPattern}${req.url}`)}`;
+
+        const proxyUrl = `${lightBlue('[real request url]')}: ${green(`${options.target}${req.url}`)}`;
+
+        consola.log(`${requestUrl}\n${proxyUrl}`);
+      });
+      _proxy.on('error', (_err, req, _res) => {
+        if (!enableLog) return;
+        consola.log(bgRed(`Error: ${req.method} `), green(`${options.target}${req.url}`));
+      });
+    },
     rewrite: path => path.replace(new RegExp(`^${item.proxyPattern}`), '')
   };
 

package.json

@@ -85,8 +85,10 @@
     "@unocss/vite": "66.0.0",
     "@vitejs/plugin-vue": "5.2.1",
     "@vitejs/plugin-vue-jsx": "4.1.1",
+    "consola": "3.4.0",
     "eslint": "9.22.0",
     "eslint-plugin-vue": "10.0.0",
+    "kolorist": "1.8.0",
     "lint-staged": "15.4.3",
     "sass": "1.85.1",
     "simple-git-hooks": "2.11.1",

pnpm-lock.yaml

@@ -117,12 +117,18 @@ importers:
       '@vitejs/plugin-vue-jsx':
         specifier: 4.1.1
         version: 4.1.1(vite@6.2.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.1)(tsx@4.19.3)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
+      consola:
+        specifier: 3.4.0
+        version: 3.4.0
       eslint:
         specifier: 9.22.0
         version: 9.22.0(jiti@2.4.2)
       eslint-plugin-vue:
         specifier: 10.0.0
         version: 10.0.0(eslint@9.22.0(jiti@2.4.2))(vue-eslint-parser@10.1.1(eslint@9.22.0(jiti@2.4.2)))
+      kolorist:
+        specifier: 1.8.0
+        version: 1.8.0
       lint-staged:
         specifier: 15.4.3
         version: 15.4.3

src/typings/vite-env.d.ts

@@ -106,6 +106,8 @@ declare namespace Env {
     readonly VITE_STORAGE_PREFIX?: string;
     /** Whether to automatically detect updates after configuring application packaging */
     readonly VITE_AUTOMATICALLY_DETECT_UPDATE?: CommonType.YesOrNo;
+    /** show proxy url log in terminal */
+    readonly VITE_PROXY_LOG?: CommonType.YesOrNo;
   }
 }