签入版本

RXThinkCMF_ThinkPhp8_NaiveVue/zh/frontend/env-config.md

@@ -34,13 +34,13 @@ VITE_GLOB_API_URL =
 VITE_GLOB_API_URL_PREFIX = /api
 
 # 代理配置（JSON 数组格式：[["前缀","目标地址"]]）
-VITE_PROXY = [["/api","http://admin.thinkphp6.elevue/api"]]
+VITE_PROXY = [["/api","http://admin.thinkphp8.naivevue/api"]]
 
 # 上传接口地址
 VITE_GLOB_UPLOAD_URL = /api/upload
 
 # 图片访问地址（用于预览上传的图片）
-VITE_GLOB_IMG_URL = http://file.thinkphp6.elevue
+VITE_GLOB_IMG_URL = http://file.thinkphp8.naivevue
 
 # 是否在生产环境删除 console（开发环境保留）
 VITE_DROP_CONSOLE = false
@@ -118,7 +118,7 @@ VITE_GLOB_API_URL =
 ### VITE_PROXY — 开发代理配置
 
 ```bash
-VITE_PROXY = [["/api","http://admin.thinkphp6.elevue/api"]]
+VITE_PROXY = [["/api","http://admin.thinkphp8.naivevue/api"]]
 ```
 
 **格式：** JSON 数组，每项为 `[前缀, 目标地址]`
@@ -151,7 +151,7 @@ VITE_GLOB_UPLOAD_URL = /api/upload
 
 ```bash
 # 开发环境
-VITE_GLOB_IMG_URL = http://file.thinkphp6.elevue
+VITE_GLOB_IMG_URL = http://file.thinkphp8.naivevue
 
 # 生产环境
 VITE_GLOB_IMG_URL = https://cdn.example.com
@@ -199,53 +199,59 @@ const fullApiUrl = apiUrl + apiPrefix;  // 如 "/api" 或 "https://api.example.c
 ### `vite.config.ts`
 
 ```typescript
-import { defineConfig, loadEnv } from 'vite';
+// ui/vite.config.ts（节选）
+import { loadEnv } from 'vite';
+import { createProxy } from './build/vite/proxy';
+import { wrapperEnv } from './build/utils';
 
-export default defineConfig(({ mode }) => {
-  // 加载环境变量
-  const env = loadEnv(mode, process.cwd());
+export default ({ command, mode }) => {
+  const root = process.cwd();
+  const env = loadEnv(mode, root);
+  const viteEnv = wrapperEnv(env);
+  const { VITE_PUBLIC_PATH, VITE_PORT, VITE_PROXY } = viteEnv;
 
   return {
-    // 开发服务器
-    server: {
-      port: Number(env.VITE_PORT) || 8001,
-      proxy: {
-        '/api': {
-          target: 'http://admin.thinkphp6.elevue/api',
-          changeOrigin: true,
+    base: VITE_PUBLIC_PATH,
+
+    // Less 全局变量注入
+    css: {
+      preprocessorOptions: {
+        less: {
+          javascriptEnabled: true,
+          additionalData: `@import "src/styles/var.less";`,
         },
       },
     },
 
+    // 开发服务器（代理由 VITE_PROXY 环境变量驱动）
+    server: {
+      host: true,
+      port: VITE_PORT,
+      proxy: createProxy(VITE_PROXY),
+    },
+
     // 构建配置
     build: {
-      // 生产环境删除 console
-      drop: env.VITE_DROP_CONSOLE === 'true' ? ['console', 'debugger'] : [],
-      // 启用 gzip 压缩
-      rollupOptions: {
-        output: {
-          manualChunks: {
-            vue: ['vue', 'vue-router', 'pinia'],
-            element: ['element-plus'],
-          },
-        },
-      },
+      target: 'es2015',
+      outDir: 'dist',
+      chunkSizeWarningLimit: 2000,
     },
   };
-});
+};
 ```
 
+**代理实现**（`build/vite/proxy.ts`）：读取 `VITE_PROXY` 数组，为每个前缀生成代理规则（`changeOrigin: true` + 去前缀 rewrite）：
+
 ### 代理配置详解
 
 ```typescript
-// 开发环境代理配置
-server: {
-  proxy: {
-    '/api': {
-      target: 'http://admin.thinkphp6.elevue/api',  // 目标地址
-      changeOrigin: true,                            // 修改请求头 Origin
-      rewrite: (path) => path.replace(/^\/api/, ''), // 路径重写（可选）
-    },
+// build/vite/proxy.ts — 由 VITE_PROXY = [["/api","http://admin.thinkphp8.naivevue/api"]] 生成
+{
+  '/api': {
+    target: 'http://admin.thinkphp8.naivevue/api',   // 目标地址
+    changeOrigin: true,                              // 修改请求头 Origin
+    ws: true,                                        // 支持 WebSocket
+    rewrite: (path) => path.replace(new RegExp('^/api'), ''),  // 去掉前缀
   },
 }
 ```
@@ -257,7 +263,7 @@ server: {
     │
     ▼ Vite proxy
     │
-    ▼ 转发到: http://admin.thinkphp6.elevue/api/user/page
+    ▼ 转发到: http://admin.thinkphp8.naivevue/api/user/page
 ```
 
 ## 构建命令
@@ -290,8 +296,7 @@ ui/dist/
 ├── assets/
 │   ├── index-xxx.js        # 主 JS（带 hash）
 │   ├── index-xxx.css       # 主 CSS（带 hash）
-│   ├── vue-xxx.js          # Vue 相关（分包）
-│   └── element-xxx.js      # Element Plus（分包）
+│   └── vue-xxx.js          # Vue 相关（分包）
 ├── favicon.ico
 └── static/                 # 静态资源
 ```
@@ -342,7 +347,7 @@ server {
 # .env.staging
 VITE_GLOB_API_URL =
 VITE_GLOB_API_URL_PREFIX = /api
-VITE_GLOB_IMG_URL = https://test-cdn.example.com
+VITE_GLOB_IMG_URL = http://file.thinkphp8.naivevue
 VITE_DROP_CONSOLE = true
 ```
 
@@ -387,4 +392,4 @@ pnpm build --mode staging
 
 **原因：** 未启用 gzip 压缩或未分包。
 
-**解决：** 启用 `VITE_BUILD_COMPRESS = gzip`，配置 `manualChunks` 分包。
+**解决：** 启用 `VITE_BUILD_COMPRESS = gzip`（构建产物生成 `.gz`，配合 Nginx `gzip_static on`）；如仍需拆分 chunk，可在 `vite.config.ts` 的 `build.rollupOptions.output.manualChunks` 中配置分包。