build: migrate the build tool from vue-cli to vite4 (#208)

2025-10-14 11:21:29 +00:00 · 2022-12-17 14:07:03 +08:00
parent 1e0c253488
commit 44dcb1e7f6
214 changed files with 27014 additions and 54234 deletions
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,107 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { UserConfig, ConfigEnv } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { loadEnv } from "vite";
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+import monacoEditorPlugin from "vite-plugin-monaco-editor";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import path from "path";
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
+
+const OUTPUT_DIR = "dist";
+// https://vitejs.dev/config/
+export default ({ mode }: ConfigEnv): UserConfig => {
+  const { VITE_SW_PROXY_TARGET } = loadEnv(mode, process.cwd());
+  return {
+    plugins: [
+      vue(),
+      vueJsx(),
+      monacoEditorPlugin({}),
+      AutoImport({
+        imports: ["vue"],
+        resolvers: [ElementPlusResolver()],
+        dts: path.resolve(__dirname, "./src/types/auto-imports.d.ts"),
+      }),
+      Components({
+        resolvers: [ElementPlusResolver()],
+        dts: path.resolve(__dirname, "./src/types/components.d.ts"),
+      }),
+      createSvgIconsPlugin({
+        // Specify the icon folder to be cached
+        iconDirs: [path.resolve(__dirname, "./src/assets/icons")],
+        // Specify symbolId format
+        symbolId: "[name]",
+      }),
+    ],
+    resolve: {
+      extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
+      alias: {
+        "@": path.resolve(__dirname, "./src"),
+        "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js",
+      },
+      preserveSymlinks: true,
+    },
+    server: {
+      host: true,
+      port: 3000,
+      proxy: {
+        "/graphql": {
+          target: `${VITE_SW_PROXY_TARGET || "http://127.0.0.1:12800"}`,
+          changeOrigin: true,
+        },
+      },
+    },
+    build: {
+      target: "es2015",
+      cssTarget: "chrome80",
+      outDir: OUTPUT_DIR,
+      manifest: false,
+      sourcemap: false,
+      chunkSizeWarningLimit: 2000,
+      rollupOptions: {
+        output: {
+          chunkFileNames: "static/js/[name]-[hash].js",
+          entryFileNames: "static/js/[name]-[hash].js",
+          assetFileNames: "static/[ext]/[name]-[hash].[ext]",
+          manualChunks(id) {
+            if (id.includes("node_modules")) {
+              if (id.includes("lodash")) {
+                return "lodash";
+              } else if (id.includes("echarts")) {
+                return "echarts";
+              } else if (id.includes("element-plus")) {
+                return "element-plus";
+              } else if (id.includes("monaco-editor")) {
+                return "monaco-editor";
+              } else if (id.includes("d3")) {
+                return "d3";
+              } else if (id.includes("vue")) {
+                return "vue";
+              } else {
+                return "vendors";
+              }
+            }
+          },
+        },
+      },
+    },
+  };
+};