1. 控件优化

2. 增加monaco-editor、echarts等

vite.config.js

@@ -1,20 +1,76 @@
 import { fileURLToPath, URL } from 'node:url'
 
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv, splitVendorChunkPlugin } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { viteMockServe } from 'vite-plugin-mock'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import eslint from 'vite-plugin-eslint'
+import { visualizer } from 'rollup-plugin-visualizer'
+import packageJson from './package.json'
+
+const optionalPlugins = [{
+  plugin: visualizer({ open: true }),
+  enabled: false
+}, {
+  plugin: viteMockServe({
+    mockPath: './mock'
+  }),
+  enabled: true
+}, {
+  plugin: splitVendorChunkPlugin(),
+  enabled: true
+}].filter(p => p.enabled).map(p => p.plugin)
+
+const JS_FILE_NAMES = 'js/[name]-[hash].js'
+const CSS_FILE_NAMES = 'css/[name]-[hash].css'
+const IMG_EXT_LIST = ['.png', '.jpg', '.gif', '.svg', '.bmp', '.webp']
+const IMG_FILE_NAMES = 'images/[name]-[hash].[ext]'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue(),
-    viteMockServe({
-      mockPath: './mock'
-    })
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+export default ({ mode }) => {
+  const env = loadEnv(mode, process.cwd())
+  return defineConfig({
+    base: env.VITE_APP_CONTEXT_PATH,
+    define: {
+      'import.meta.env.VITE_APP_VERSION': JSON.stringify(packageJson.version)
+    },
+    plugins: [vue(), vueJsx(), eslint(), ...optionalPlugins],
+    esbuild: {
+      drop: mode === 'production' ? ['console', 'debugger'] : []
+    },
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url))
+      }
+    },
+    build: {
+      sourcemap: true,
+      rollupOptions: {
+        output: {
+          chunkFileNames: JS_FILE_NAMES, // 引入文件名的名称
+          entryFileNames: JS_FILE_NAMES, // 包的入口文件名称
+          assetFileNames (assetInfo) {
+            if (assetInfo.name?.endsWith('.css')) { // CSS文件
+              return CSS_FILE_NAMES
+            } else if (IMG_EXT_LIST.some((ext) => assetInfo.name?.endsWith(ext))) { // 图片
+              return IMG_FILE_NAMES
+            }
+            return 'assets/[name]-[hash].[ext]' // 其他资源
+          },
+          manualChunks (id) {
+            if (id.includes('element-plus')) {
+              return 'elp'
+            }
+          }
+        }
+      }
+    },
+    worker: {
+      rollupOptions: {
+        output: {
+          assetFileNames: JS_FILE_NAMES
+        }
+      }
     }
-  }
-})
+  })
+}