initHeader

frontend/build/getEnv.ts

@@ -0,0 +1,46 @@
+import path from "path";
+
+export function isDevFn(mode: string): boolean {
+  return mode === "development";
+}
+
+export function isProdFn(mode: string): boolean {
+  return mode === "production";
+}
+
+export function isTestFn(mode: string): boolean {
+  return mode === "test";
+}
+
+/**
+ * Whether to generate package preview
+ */
+export function isReportMode(): boolean {
+  return process.env.VITE_REPORT === "true";
+}
+
+// Read all environment variable configuration files to process.env
+export function wrapperEnv(envConf: Recordable): ViteEnv {
+  const ret: any = {};
+
+  for (const envName of Object.keys(envConf)) {
+    let realName = envConf[envName].replace(/\\n/g, "\n");
+    realName = realName === "true" ? true : realName === "false" ? false : realName;
+    if (envName === "VITE_PORT") realName = Number(realName);
+    if (envName === "VITE_PROXY") {
+      try {
+        realName = JSON.parse(realName);
+      } catch (error) {}
+    }
+    ret[envName] = realName;
+  }
+  return ret;
+}
+
+/**
+ * Get user root directory
+ * @param dir file path
+ */
+export function getRootPath(...dir: string[]) {
+  return path.resolve(process.cwd(), ...dir);
+}

frontend/build/plugins.ts

@@ -0,0 +1,108 @@
+import { resolve } from "path";
+import { PluginOption } from "vite";
+import { VitePWA } from "vite-plugin-pwa";
+import { visualizer } from "rollup-plugin-visualizer";
+import { createHtmlPlugin } from "vite-plugin-html";
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import eslintPlugin from "vite-plugin-eslint";
+import viteCompression from "vite-plugin-compression";
+import vueSetupExtend from "unplugin-vue-setup-extend-plus/vite";
+
+/**
+ * 创建 vite 插件
+ * @param viteEnv
+ */
+export const createVitePlugins = (viteEnv: ViteEnv): (PluginOption | PluginOption[])[] => {
+  const { VITE_GLOB_APP_TITLE, VITE_REPORT, VITE_PWA } = viteEnv;
+  return [
+    vue(),
+    // vue 可以使用 jsx/tsx 语法
+    vueJsx(),
+    // esLint 报错信息显示在浏览器界面上
+    eslintPlugin(),
+    // name 可以写在 script 标签上
+    vueSetupExtend({}),
+    // 创建打包压缩配置
+    createCompression(viteEnv),
+    // 注入变量到 html 文件
+    createHtmlPlugin({
+      inject: {
+        data: { title: VITE_GLOB_APP_TITLE }
+      }
+    }),
+    // 使用 svg 图标
+    createSvgIconsPlugin({
+      iconDirs: [resolve(process.cwd(), "src/assets/icons")],
+      symbolId: "icon-[dir]-[name]"
+    }),
+    // vitePWA
+    VITE_PWA && createVitePwa(viteEnv),
+    // 是否生成包预览，分析依赖包大小做优化处理
+    VITE_REPORT && (visualizer({ filename: "stats.html", gzipSize: true, brotliSize: true }) as PluginOption)
+  ];
+};
+
+/**
+ * @description 根据 compress 配置，生成不同的压缩规则
+ * @param viteEnv
+ */
+const createCompression = (viteEnv: ViteEnv): PluginOption | PluginOption[] => {
+  const { VITE_BUILD_COMPRESS = "none", VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv;
+  const compressList = VITE_BUILD_COMPRESS.split(",");
+  const plugins: PluginOption[] = [];
+  if (compressList.includes("gzip")) {
+    plugins.push(
+      viteCompression({
+        ext: ".gz",
+        algorithm: "gzip",
+        deleteOriginFile: VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE
+      })
+    );
+  }
+  if (compressList.includes("brotli")) {
+    plugins.push(
+      viteCompression({
+        ext: ".br",
+        algorithm: "brotliCompress",
+        deleteOriginFile: VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE
+      })
+    );
+  }
+  return plugins;
+};
+
+/**
+ * @description VitePwa
+ * @param viteEnv
+ */
+const createVitePwa = (viteEnv: ViteEnv): PluginOption | PluginOption[] => {
+  const { VITE_GLOB_APP_TITLE } = viteEnv;
+  return VitePWA({
+    registerType: "autoUpdate",
+    manifest: {
+      name: VITE_GLOB_APP_TITLE,
+      short_name: VITE_GLOB_APP_TITLE,
+      theme_color: "#ffffff",
+      icons: [
+        {
+          src: "/logo.png",
+          sizes: "192x192",
+          type: "image/png"
+        },
+        {
+          src: "/logo.png",
+          sizes: "512x512",
+          type: "image/png"
+        },
+        {
+          src: "/logo.png",
+          sizes: "512x512",
+          type: "image/png",
+          purpose: "any maskable"
+        }
+      ]
+    }
+  });
+};

frontend/build/proxy.ts

@@ -0,0 +1,30 @@
+import type { ProxyOptions } from "vite";
+
+type ProxyItem = [string, string];
+
+type ProxyList = ProxyItem[];
+
+type ProxyTargetList = Record<string, ProxyOptions>;
+
+/**
+ * 创建代理，用于解析 .env.development 代理配置
+ * @param list
+ */
+export function createProxy(list: ProxyList = []) {
+  const ret: ProxyTargetList = {};
+  for (const [prefix, target] of list) {
+    const httpsRE = /^https:\/\//;
+    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;
+}