feat: 🚀 optimize code and add VitePWA

Author: HalseySpicy

.env.development

@@ -7,6 +7,9 @@ VITE_PUBLIC_PATH = /
 # 打包时是否删除 console
 VITE_DROP_CONSOLE = true
 
+# 是否开启 VitePWA
+VITE_PWA = false
+
 # 开发环境接口地址
 VITE_API_URL = /api
 

.env.production

@@ -14,5 +14,8 @@ VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
 # 打包时是否删除 console
 VITE_DROP_CONSOLE = true
 
+# 是否开启 VitePWA
+VITE_PWA = true
+
 # 线上环境接口地址
 VITE_API_URL = "https://mock.mengxuegu.com/mock/629d727e6163854a32e8307e"

.env.test

@@ -14,5 +14,8 @@ VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
 # 打包时是否删除 console
 VITE_DROP_CONSOLE = true
 
+# 是否开启 VitePWA
+VITE_PWA = false
+
 # 测试环境接口地址
 VITE_API_URL = "https://www.fastmock.site/mock/f81e8333c1a9276214bcdbc170d9e0a0"

build/plugins.ts

@@ -1,5 +1,6 @@
 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";
@@ -14,6 +15,7 @@ import vueSetupExtend from "unplugin-vue-setup-extend-plus/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 语法
@@ -27,21 +29,23 @@ export const createVitePlugins = (viteEnv: ViteEnv): (PluginOption | PluginOptio
     // 注入变量到 html 文件
     createHtmlPlugin({
       inject: {
-        data: { title: viteEnv.VITE_GLOB_APP_TITLE }
+        data: { title: VITE_GLOB_APP_TITLE }
       }
     }),
     // 使用 svg 图标
     createSvgIconsPlugin({
       iconDirs: [resolve(process.cwd(), "src/assets/icons")],
       symbolId: "icon-[dir]-[name]"
     }),
+    // vitePWA
+    VITE_PWA && createVitePwa(viteEnv),
     // 是否生成包预览，分析依赖包大小做优化处理
-    viteEnv.VITE_REPORT && (visualizer({ filename: "stats.html", gzipSize: true, brotliSize: true }) as PluginOption)
+    VITE_REPORT && (visualizer({ filename: "stats.html", gzipSize: true, brotliSize: true }) as PluginOption)
   ];
 };
 
 /**
- * 根据 compress 配置，生成不同的压缩规则
+ * @description 根据 compress 配置，生成不同的压缩规则
  * @param viteEnv
  */
 const createCompression = (viteEnv: ViteEnv): PluginOption | PluginOption[] => {
@@ -67,6 +71,39 @@ const createCompression = (viteEnv: ViteEnv): PluginOption | PluginOption[] => {
       })
     );
   }
-
   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"
+        }
+      ]
+    }
+  });
+};

package.json

@@ -36,26 +36,26 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
-    "@vueuse/core": "^10.1.0",
+    "@vueuse/core": "^10.1.2",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "^1.4.0",
     "dayjs": "^1.11.7",
     "driver.js": "^0.9.8",
-    "echarts": "^5.4.1",
+    "echarts": "^5.4.2",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "^2.3.4",
     "js-md5": "^0.7.3",
     "mitt": "^3.0.0",
     "nprogress": "^0.2.0",
-    "pinia": "^2.0.36",
+    "pinia": "^2.1.3",
     "pinia-plugin-persistedstate": "^3.1.0",
     "print-js": "^1.6.0",
-    "qs": "^6.11.1",
+    "qs": "^6.11.2",
     "sortablejs": "^1.15.0",
-    "vue": "^3.3.2",
+    "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.2.0",
+    "vue-router": "^4.2.1",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
@@ -93,10 +93,11 @@
     "stylelint-config-standard-scss": "^7.0.1",
     "typescript": "^5.0.4",
     "unplugin-vue-setup-extend-plus": "^1.0.0",
-    "vite": "^4.3.7",
+    "vite": "^4.3.8",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-html": "^3.2.0",
+    "vite-plugin-pwa": "^0.15.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "vue-tsc": "^1.6.5"
   },