feat(env): 添加环境变量配置并优化 Vite 配置

- 新增 env.config.ts 文件，定义不同环境下的配置 - 更新 vite.config.ts，使用环境变量配置 - 修改 package.json，调整预览命令以使用开发环境 - 更新 tsconfig.node.json，包含 env.d.ts 文件 - 定义 EnvConfig 接口，规范环境变量配置
5 months ago · 5889513eea
5 changed files with 195 additions and 148 deletions
--- a/env.config.ts
+++ b/env.config.ts
@ -0,0 +1,22 @@
+import lodash from "lodash";
+
+const defEnv: EnvConfig = {
+    serverHost: '0.0.0.0',
+    serverPort: 7791,
+  lccApiTarget: 'http://127.0.0.1:7779',
+};
+
+const allEnv: Record<string, Partial<EnvConfig>> = {
+    development: {},
+    production: {
+      lccApiTarget: 'http://127.0.0.1:8001',
+        serverPort: 3001,
+    },
+};
+
+for (const key in allEnv) {
+    const config = allEnv[key];
+    allEnv[key] = lodash.defaultsDeep(config, defEnv);
+}
+
+export default allEnv as Record<string, EnvConfig>;
--- a/env.d.ts
+++ b/env.d.ts
@ -1 +1,11 @@
 /// <reference types="vite/client" />
+
+/** 项目环境配置 */
+interface EnvConfig {
+  /** vite 调试服务 bind host */
+  serverHost: string | boolean;
+  /** vite 调试端口 */
+  serverPort: number;
+  /** lcc api服务地址 */
+  lccApiTarget: string;
+}
--- a/package.json
+++ b/package.json
@ -7,7 +7,7 @@
    "init": "pnpm i",
    "dev": "vite",
    "build": "vite build",
-    "preview": "vite preview",
+    "preview": "vite preview -m development",
    "build-check": "run-p type-check \"build-only {@}\" --",
    "type-check": "vue-tsc --build",
    "format": "prettier --write src/"
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -6,7 +6,8 @@
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*",
-    "eslint.config.*"
+    "eslint.config.*",
+    "env.d.ts"
  ],
  "compilerOptions": {
    "noEmit": true,
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,157 +1,171 @@
 import { fileURLToPath, URL } from 'node:url'

-import { defineConfig } from 'vite'
+import { defineConfig, UserConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 // import vueJsx from '@vitejs/plugin-vue-jsx'
 // import vueDevTools from 'vite-plugin-vue-devtools'
+import allEnv from "./env.config";

-export default defineConfig({
-  plugins: [
-    vue(),
-    // vueJsx(),
-    // vueDevTools(),
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  },
-  server: {
-    host: '0.0.0.0',
-    port: 7791,
-    open: false,
-    proxy: {
-      '^/api/.*': {
-        target: "http://127.0.0.1:7779",
-        changeOrigin: false,
-      },
+export default defineConfig(env => {
+  const isProduction = env.mode === 'production';
+  const isBuild = env.command === 'build';
+  const mode = env.mode;
+  const envConfig = allEnv[mode];
+  const config: UserConfig = {
+    plugins: [
+      vue(),
+      // vueJsx(),
+      // vueDevTools(),
+    ],
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url))
+      }
    },
-  },
-  optimizeDeps: {
-    include: [
-      'lodash', 'axios', 'three', 'dat.gui',
-      'element-plus', 'ag-grid-community', 'ag-grid-enterprise', 'ag-grid-vue3',
-      'codemirror'
-    ]
-  },
-  build:{
-    target: 'modules',
-    outDir: "./dist",
-    minify: true,
-    sourcemap: false,
-    rollupOptions: {
-      output: {
-        chunkFileNames: (chunkInfo) => {
-          return 'js/[name]-[hash].js';
-        },
-        entryFileNames: 'js/yvan-lcc.mjs',
-        assetFileNames: 'js/yvan-lcc[extname]',
-        name: "yvan-lcc",
-        exports: 'named',
-        globals: {
-          vue: "Vue",
-        },
-        manualChunks: function (id) {
-          if (id.includes("/yvan-lcc/src")) {
-            return;
-          }
-          if (id.includes('diagram-js')) {
-            return 'diagram-js';
-          }
-          // 无法切包
-          // if (id.includes('/monaco-editor/')) {
-          //     return 'monaco-editor';
-          // }
-          // 无法切包
-          // if (id.includes('/codemirror/')) {
-          //     return 'codemirror';
-          // }
-          // if (id.includes('/@codemirror/')) {
-          //     return 'codemirror2';
-          // }
-          if (id.includes('/lodash/') || id.includes('/lodash-es/')) {
-            return 'lodash';
-          }
-          if (id.includes('/vant/')) {
-            return 'vant';
-          }
-          if (id.includes('/zrender/')) {
-            return 'zrender';
-          }
-          if (id.includes('/@vicons/ionicons5/')) {
-            return 'ionicons5';
-          }
-          if (id.includes('/@vicons/antd/')) {
-            return 'antd-icons';
-          }
-          if (id.includes('/@vicons/fa/')) {
-            return 'fa-icons';
-          }
-          if (id.includes('/dayjs/')) {
-            return 'dayjs';
-          }
-          if (id.includes('/@vueuse/')) {
-            return 'vueuse';
-          }
-          if (id.includes('/axios/')) {
-            return 'axios';
-          }
-          if (id.includes('/crypto-js/')) {
-            return 'crypto-js';
-          }
-          if (id.includes('/@interactjs/')) {
-            return 'interactjs';
-          }
-          if (id.includes('bpmn-js')) {
-            return 'bpmn-js';
-          }
-          if (id.includes('/highlight.js/')) {
-            return 'highlight';
-          }
-          if (id.includes('/echarts/')) {
-            return 'echarts';
-          }
-          if (id.includes('/prismjs/')) {
-            return 'prismjs';
-          }
-          if (id.includes('/jquery/')) {
-            return 'jquery';
-          }
-          if (id.includes('/xlsx/')) {
-            return 'xlsx';
-          }
-          if (id.includes('/vue3-markdown-it/')) {
-            return 'vue3-markdown-it';
-          }
-          if (id.includes('/element-plus/') || id.includes('/@element-plus/')) {
-            return 'element-plus';
-          }
-          console.log("id", id)
+    server: {
+      host: envConfig.serverHost,
+      port: envConfig.serverPort,
+      open: false,
+      proxy: {
+        '^/api/.*': {
+          target: envConfig.lccApiTarget,
+          changeOrigin: false,
        },
      },
-      external: [
-        // 'vue',
-        // 'vue-router',
-        // 'lodash',
-        // 'element-plus',
-        // "codemirror",
-        // 'ag-grid-community',
-        // 'ag-grid-enterprise',
-        // 'ag-grid-vue3',
-        // 'localforage',
-        // 'json5',
-        // "vant",
-        // "axios",
-        // "echarts",
-        // "split.js",
-        // "pinia",
-        // "vue3-menus",
-        // "resize-observer-polyfill",
-        // "@element-plus/icons-vue",
-        // "@vicons/fa",
-        // "@vicons/utils",
-        // "axios"
-      ],
    },
-  }
+    preview: {
+      host: envConfig.serverHost,
+      port: envConfig.serverPort,
+      strictPort: true,
+      allowedHosts: true,
+    },
+    optimizeDeps: {
+      include: [
+        'lodash', 'axios', 'three', 'dat.gui',
+        'element-plus', 'ag-grid-community', 'ag-grid-enterprise', 'ag-grid-vue3',
+        'codemirror'
+      ]
+    },
+    build:{
+      target: 'modules',
+      outDir: "./dist",
+      minify: true,
+      sourcemap: false,
+      rollupOptions: {
+        output: {
+          chunkFileNames: (chunkInfo) => {
+            return 'js/[name]-[hash].js';
+          },
+          entryFileNames: 'js/yvan-lcc.mjs',
+          assetFileNames: 'js/yvan-lcc[extname]',
+          name: "yvan-lcc",
+          exports: 'named',
+          globals: {
+            vue: "Vue",
+          },
+          manualChunks: function (id) {
+            if (id.includes("/yvan-lcc/src")) {
+              return;
+            }
+            if (id.includes('diagram-js')) {
+              return 'diagram-js';
+            }
+            // 无法切包
+            // if (id.includes('/monaco-editor/')) {
+            //     return 'monaco-editor';
+            // }
+            // 无法切包
+            // if (id.includes('/codemirror/')) {
+            //     return 'codemirror';
+            // }
+            // if (id.includes('/@codemirror/')) {
+            //     return 'codemirror2';
+            // }
+            if (id.includes('/lodash/') || id.includes('/lodash-es/')) {
+              return 'lodash';
+            }
+            if (id.includes('/vant/')) {
+              return 'vant';
+            }
+            if (id.includes('/zrender/')) {
+              return 'zrender';
+            }
+            if (id.includes('/@vicons/ionicons5/')) {
+              return 'ionicons5';
+            }
+            if (id.includes('/@vicons/antd/')) {
+              return 'antd-icons';
+            }
+            if (id.includes('/@vicons/fa/')) {
+              return 'fa-icons';
+            }
+            if (id.includes('/dayjs/')) {
+              return 'dayjs';
+            }
+            if (id.includes('/@vueuse/')) {
+              return 'vueuse';
+            }
+            if (id.includes('/axios/')) {
+              return 'axios';
+            }
+            if (id.includes('/crypto-js/')) {
+              return 'crypto-js';
+            }
+            if (id.includes('/@interactjs/')) {
+              return 'interactjs';
+            }
+            if (id.includes('bpmn-js')) {
+              return 'bpmn-js';
+            }
+            if (id.includes('/highlight.js/')) {
+              return 'highlight';
+            }
+            if (id.includes('/echarts/')) {
+              return 'echarts';
+            }
+            if (id.includes('/prismjs/')) {
+              return 'prismjs';
+            }
+            if (id.includes('/jquery/')) {
+              return 'jquery';
+            }
+            if (id.includes('/xlsx/')) {
+              return 'xlsx';
+            }
+            if (id.includes('/vue3-markdown-it/')) {
+              return 'vue3-markdown-it';
+            }
+            if (id.includes('/element-plus/') || id.includes('/@element-plus/')) {
+              return 'element-plus';
+            }
+            console.log("id", id)
+          },
+        },
+        external: [
+          // 'vue',
+          // 'vue-router',
+          // 'lodash',
+          // 'element-plus',
+          // "codemirror",
+          // 'ag-grid-community',
+          // 'ag-grid-enterprise',
+          // 'ag-grid-vue3',
+          // 'localforage',
+          // 'json5',
+          // "vant",
+          // "axios",
+          // "echarts",
+          // "split.js",
+          // "pinia",
+          // "vue3-menus",
+          // "resize-observer-polyfill",
+          // "@element-plus/icons-vue",
+          // "@vicons/fa",
+          // "@vicons/utils",
+          // "axios"
+        ],
+      },
+    }
+  };
+  return config;
 })