更新0.1.1版本

build/vite/plugin/html.ts

@@ -0,0 +1,42 @@
+/**
+ * Plugin to minimize and use ejs template syntax in index.html.
+ * https://github.com/anncwb/vite-plugin-html
+ */
+import type { Plugin } from 'vite';
+
+import html 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: Plugin[] = html({
+    minify: isBuild,
+    inject: {
+      // Inject data into ejs template
+      injectData: {
+        title: VITE_GLOB_APP_TITLE,
+      },
+      // Embed the generated app.config.js file
+      tags: isBuild
+        ? [
+          {
+            tag: 'script',
+            attrs: {
+              src: getAppConfigSrc(),
+            },
+          },
+        ]
+        : [],
+    },
+  });
+  return htmlPlugin;
+}

build/vite/plugin/index.ts

@@ -0,0 +1,26 @@
+import type { Plugin } from 'vite';
+
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+
+import { configHtmlPlugin } from './html';
+import { configMockPlugin } from './mock';
+
+export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, prodMock) {
+  const { VITE_USE_MOCK } = viteEnv;
+
+  const vitePlugins: (Plugin | Plugin[])[] = [
+    // have to
+    vue(),
+    // have to
+    vueJsx(),
+  ];
+
+  // vite-plugin-html
+  vitePlugins.push(configHtmlPlugin(viteEnv, isBuild));
+
+  // vite-plugin-mock
+  VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild, prodMock));
+
+  return vitePlugins;
+}

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();
+       `,
+  });
+}

build/vite/plugin/styleImport.ts

@@ -0,0 +1,22 @@
+/**
+ *  Introduces component library styles on demand.
+ * https://github.com/anncwb/vite-plugin-style-import
+ */
+
+import styleImport from 'vite-plugin-style-import';
+
+export function configStyleImportPlugin(isBuild: boolean) {
+  if (!isBuild) return [];
+  const styleImportPlugin = styleImport({
+    libs: [
+      {
+        libraryName: 'ant-design-vue',
+        esModule: true,
+        resolveStyle: (name) => {
+          return `ant-design-vue/es/${ name }/style/index`;
+        },
+      },
+    ],
+  });
+  return styleImportPlugin;
+}