refactor: migrate from Vue CLI to Vite, update WebSocket handling, and clean up configuration

- Replaced vue.config.js with vite.config.js for Vite setup. - Updated WebSocket implementation in webSocket.js for improved readability and performance. - Removed unnecessary comments and cleaned up code formatting. - Configured Vite plugins for auto-imports, SVG icons, and component resolution. - Set up proxy configurations for API endpoints in Vite.
2025-06-18 14:31:35 +08:00
parent 9191678708
commit 3a52cc1e53
19 changed files with 20706 additions and 26139 deletions
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,116 @@
+import { defineConfig, loadEnv } from "vite";
+import vue from "@vitejs/plugin-vue";
+import Components from "unplugin-vue-components/vite";
+import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
+import AutoImport from "unplugin-auto-import/vite";
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
+import path from "path";
+
+// https://vite.dev/config/
+export default defineConfig(({ mode }) => {
+  // 加载环境变量
+  const env = loadEnv(mode, process.cwd(), "");
+
+  return {
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "src"),
+      },
+    },
+    plugins: [
+      vue(),
+      Components({
+        resolvers: [AntDesignVueResolver({ importStyle: false })],
+      }),
+      AutoImport({
+        imports: [
+          "vue",
+          "vue-router",
+          {
+            "lodash-es": [
+              "debounce",
+              "cloneDeep",
+              "cloneDeepWith",
+              "isBoolean",
+              "isString",
+              "isNumber",
+              "isArray",
+              "isDate",
+              "isFunction",
+              "isNaN",
+              "isNull",
+              "isObject",
+              "isUndefined",
+            ],
+          },
+        ],
+        dts: "src/auto-imports.d.ts",
+      }),
+      createSvgIconsPlugin({
+        // 指定需要缓存的图标文件夹
+        iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
+        // 指定symbolId格式
+        symbolId: "icon-[dir]-[name]",
+      }),
+    ],
+    css: {
+      preprocessorOptions: {
+        less: {
+          modifyVars: {
+            "primary-color": "#ec6800",
+          },
+          javascriptEnabled: true,
+          // 全局导入less变量文件
+          additionalData: `@import "${path.resolve(
+            __dirname,
+            "src/assets/style/style.less"
+          )}";`,
+        },
+      },
+    },
+    server: {
+      host: "0.0.0.0", // 允许局域网内的IP访问
+      port: mode === "production" ? 8060 : 10086, // 根据环境设置端口
+      open: true, // 自动打开浏览器
+      strictPort: false, // 如果端口已被占用，则尝试下一个可用端口
+      proxy: {
+        "/api": {
+          target: "http://192.168.1.7:5567",
+          // target: 'https://develop.api.aida.com.hk',
+          changeOrigin: true,
+        },
+        "/xupei": {
+          target: "http://192.168.1.7:5567",
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/robot/, "/api"),
+        },
+        "/oldsis": {
+          target: "https://old.api.aida.com.hk",
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/oldsis/, "/api"),
+        },
+      },
+    },
+    build: {
+      sourcemap: false, // 对应vue.config.js中的productionSourceMap: false
+      outDir: "dist",
+      assetsDir: "assets",
+      // 分包策略
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            vendor: ["vue", "vue-router", "vuex"],
+            antd: ["ant-design-vue"],
+            utils: ["axios", "lodash-es"],
+          },
+        },
+      },
+    },
+    // 定义全局常量替换
+    define: {
+      __VUE_OPTIONS_API__: true,
+      __VUE_PROD_DEVTOOLS__: false,
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
+    },
+  };
+});