签入版本

ui/build/vite/plugin/compress.ts

@@ -0,0 +1,35 @@
+/**
+ * Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
+ * https://github.com/anncwb/vite-plugin-compression
+ */
+import type { Plugin } from 'vite';
+
+import compressPlugin from 'vite-plugin-compression';
+
+export function configCompressPlugin(
+  compress: 'gzip' | 'brotli' | 'none',
+  deleteOriginFile = false
+): Plugin | Plugin[] {
+  const compressList = compress.split(',');
+
+  const plugins: Plugin[] = [];
+
+  if (compressList.includes('gzip')) {
+    plugins.push(
+      compressPlugin({
+        ext: '.gz',
+        deleteOriginFile,
+      })
+    );
+  }
+  if (compressList.includes('brotli')) {
+    plugins.push(
+      compressPlugin({
+        ext: '.br',
+        algorithm: 'brotliCompress',
+        deleteOriginFile,
+      })
+    );
+  }
+  return plugins;
+}

ui/build/vite/plugin/html.ts

@@ -0,0 +1,40 @@
+/**
+ * Plugin to minimize and use ejs template syntax in index.html.
+ * https://github.com/anncwb/vite-plugin-html
+ */
+ import type { PluginOption } from 'vite';
+ import { createHtmlPlugin } from 'vite-plugin-html';
+ import pkg from '../../../package.json';
+ import { GLOB_CONFIG_FILE_NAME } from '../../constant';
+ 
+ export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
+   const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env;
+ 
+   const path = VITE_PUBLIC_PATH.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`;
+ 
+   const getAppConfigSrc = () => {
+     return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`;
+   };
+ 
+   const htmlPlugin: PluginOption[] = createHtmlPlugin({
+     minify: isBuild,
+     inject: {
+       // Inject data into ejs template
+       data: {
+         title: VITE_GLOB_APP_TITLE,
+       },
+       // Embed the generated app.config.js file
+       tags: isBuild
+         ? [
+             {
+               tag: 'script',
+               attrs: {
+                 src: getAppConfigSrc(),
+               },
+             },
+           ]
+         : [],
+     },
+   });
+   return htmlPlugin;
+ }

ui/build/vite/plugin/index.ts

@@ -0,0 +1,59 @@
+import type { PluginOption } from 'vite';
+
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import VueSetupExtend from 'vite-plugin-vue-setup-extend';
+// 自动按需导入，根据自身情况选择
+import AutoImport from 'unplugin-auto-import/vite';
+// import Components from 'unplugin-vue-components/vite';
+// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
+// import Components from 'unplugin-vue-components/vite';
+// import ElementPlus from 'unplugin-element-plus/vite';
+
+import { configHtmlPlugin } from './html';
+import { configMockPlugin } from './mock';
+import { configCompressPlugin } from './compress';
+import { configVisualizerPlugin } from './visualizer';
+
+export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, prodMock) {
+  const { VITE_USE_MOCK, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv;
+
+  const vitePlugins: (PluginOption | PluginOption[])[] = [
+    // have to
+    vue(),
+    // have to
+    vueJsx(),
+    VueSetupExtend(),
+    // ElementPlus({
+    //   // 引入的样式的类型，可以是css、sass、less等，
+    //   importStyle: 'sass',
+    //   useSource: true,
+    // }),
+    // 按需引入element且自动创建组件声明
+    AutoImport({
+      imports: ['vue', 'vue-router', 'pinia'], // 自动导入的依赖库数组
+				dts: './auto-imports.d.ts', // 自动导入类型定义文件路径
+    }),
+    // Components({
+    //   resolvers: [ElementPlusResolver()],
+    // }),
+  ];
+
+  // vite-plugin-html
+  vitePlugins.push(configHtmlPlugin(viteEnv, isBuild));
+
+  // vite-plugin-mock
+  VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild, prodMock));
+
+  // rollup-plugin-visualizer
+  vitePlugins.push(configVisualizerPlugin());
+
+  if (isBuild) {
+    // rollup-plugin-gzip
+    vitePlugins.push(
+      configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE),
+    );
+  }
+
+  return vitePlugins;
+}

ui/build/vite/plugin/mock.ts

@@ -0,0 +1,19 @@
+/**
+ * Mock plugin for development and production.
+ * https://github.com/anncwb/vite-plugin-mock
+ */
+import { viteMockServe } from 'vite-plugin-mock';
+
+export function configMockPlugin(isBuild: boolean, prodMock: boolean) {
+  return viteMockServe({
+    ignore: /^\_/,
+    mockPath: 'mock',
+    localEnabled: !isBuild,
+    prodEnabled: isBuild && prodMock,
+    injectCode: `
+       import { setupProdMockServer } from '../mock/_createProductionServer';
+ 
+       setupProdMockServer();
+       `,
+  });
+}

ui/build/vite/plugin/visualizer.ts

@@ -0,0 +1,15 @@
+import { PluginOption } from 'vite';
+import visualizer from 'rollup-plugin-visualizer';
+import { isReportMode } from '../../utils';
+
+export function configVisualizerPlugin() {
+  if (isReportMode()) {
+    return visualizer({
+      filename: './node_modules/.cache/visualizer/stats.html',
+      open: true,
+      gzipSize: true,
+      brotliSize: true,
+    }) as PluginOption;
+  }
+  return [];
+}

ui/build/vite/proxy.ts

@@ -0,0 +1,34 @@
+/**
+ * Used to parse the .env.development proxy configuration
+ */
+import type { ProxyOptions } from 'vite';
+
+type ProxyItem = [string, string];
+
+type ProxyList = ProxyItem[];
+
+type ProxyTargetList = Record<string, ProxyOptions & { rewrite: (path: string) => string }>;
+
+const httpsRE = /^https:\/\//;
+
+/**
+ * Generate proxy
+ * @param list
+ */
+export function createProxy(list: ProxyList = []) {
+  const ret: ProxyTargetList = {};
+  for (const [prefix, target] of list) {
+    const isHttps = httpsRE.test(target);
+
+    // https://github.com/http-party/node-http-proxy#options
+    ret[prefix] = {
+      target: target,
+      changeOrigin: true,
+      ws: true,
+      rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''),
+      // https is require secure=false
+      ...(isHttps ? { secure: false } : {}),
+    };
+  }
+  return ret;
+}