签入版本

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,51 @@
+import type { PluginOption } from 'vite';
+
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+
+import windiCSS from 'vite-plugin-windicss';
+
+import { configHtmlPlugin } from './html';
+import { configMockPlugin } from './mock';
+import { configCompressPlugin } from './compress';
+import { configThemePlugin } from './theme';
+import { configVisualizerPlugin } from './visualizer';
+import { configStyleImportPlugin } from './styleImport';
+
+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(),
+  ];
+
+  // vite-plugin-windicss
+  vitePlugins.push(windiCSS());
+
+  // vite-plugin-html
+  vitePlugins.push(configHtmlPlugin(viteEnv, isBuild));
+
+  // vite-plugin-mock
+  VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild, prodMock));
+
+  // vite-plugin-style-import
+  vitePlugins.push(configStyleImportPlugin(isBuild));
+
+  //vite-plugin-theme
+  vitePlugins.push(configThemePlugin());
+
+  // 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/styleImport.ts

@@ -0,0 +1,16 @@
+/**
+ *  Introduces component library styles on demand.
+ * https://github.com/antfu/unplugin-vue-components
+ */
+import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
+
+import Components from 'unplugin-vue-components/vite';
+
+export function configStyleImportPlugin(isBuild: boolean) {
+  if (!isBuild) {
+    return [];
+  }
+  return Components({
+    resolvers: [AntDesignVueResolver()],
+  });
+}

ui/build/vite/plugin/theme.ts

@@ -0,0 +1,45 @@
+import type { Plugin } from 'vite';
+import path from 'path';
+import themePreprocessorPlugin from '@zougt/vite-plugin-theme-preprocessor';
+
+export function configThemePlugin(): Plugin[] {
+  const includeStyles = {
+    '.ant-button-primary:hover, .ant-button-primary:focus': {
+      color: '#FFFFFF',
+    },
+  };
+  const plugin = [
+    themePreprocessorPlugin({
+      less: {
+        // 是否启用任意主题色模式，这里不启用
+        arbitraryMode: false,
+        multipleScopeVars: [
+          {
+            scopeName: 'theme-default',
+            path: path.resolve('src/styles/theme/theme-default.less'),
+            includeStyles,
+          },
+          {
+            scopeName: 'theme-dark',
+            path: path.resolve('src/styles/theme/theme-dark.less'),
+            includeStyles,
+          },
+        ],
+        includeStyleWithColors: [
+          {
+            // color也可以是array，如 ["#ffffff","#000"]
+            color: '#ffffff',
+          },
+          {
+            color: ['transparent', 'none'],
+            excludeSelectors: ['.ant-btn-link:hover, .ant-btn-link:focus, .ant-btn-link:active'],
+          },
+        ],
+        // 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效
+        extract: false,
+      },
+    }),
+  ];
+
+  return plugin as unknown as Plugin[];
+}

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 [];
+}