update

mock/_createProductionServer.js

@@ -0,0 +1,19 @@
+import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
+
+const modules = import.meta.globEager('./**/*.js');
+
+const mockModules = [];
+Object.keys(modules).forEach((key) => {
+  console.log(111, key)
+  if (key.includes('/_')) {
+    return;
+  }
+  mockModules.push(...modules[key].default);
+});
+
+/**
+ * Used in a production environment. Need to manually import all modules
+ */
+export function setupProdMockServer() {
+  createProdMockServer(mockModules);
+}

package.json

@@ -7,10 +7,11 @@
     "url": "https://github.com/huzhushan"
   },
   "scripts": {
-    "start": "npm run mock",
+    "start": "npm run dev:mock",
     "dev": "vite",
-    "mock": "vite --mode mock",
+    "dev:mock": "vite --mode mock",
     "build": "vite build",
+    "build:mock": "vite build --mode mock",
     "serve": "vite preview"
   },
   "browserslist": [

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    // 兼容浏览器，添加前缀
-    'autoprefixer': {}
-  }
-}
+    autoprefixer: {},
+  },
+};

src/assets/logo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1618380288923" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1997" data-spm-anchor-id="a313x.7781069.0.i9" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M651.6 85l-137 137L372.9 84.7c-10-9.7-3.2-26.6 10.7-26.7l256.4-0.8c14.6 0 21.9 17.5 11.6 27.8z" fill="#e81c56" p-id="1998" data-spm-anchor-id="a313x.7781069.0.i10" class=""></path><path d="M844.1 71.2L717.8 197.5v364.3c0 2.1-0.9 4.2-2.4 5.7L522.7 760.1c14.8 14 72.2 62.7 157.4 67.4l204.3-204.3c7.6-7.6 11.8-17.8 11.8-28.5V92.8c0.1-27.3-32.8-40.9-52.1-21.6z" fill="#41b883" p-id="1999" data-spm-anchor-id="a313x.7781069.0.i5" class=""></path><path d="M522.7 760.1l-2.1 2.1-202.7-202.7V202.8c0-8.3-3.3-16.3-9.2-22.2L194.5 67.3c-20.7-20.5-55.9-5.9-55.9 23.3V638l334 334c17.4 17.4 45.6 17.4 63 0l144.5-144.5c-85.2-4.7-142.5-53.3-157.4-67.4z" fill="#1296db" p-id="2000" data-spm-anchor-id="a313x.7781069.0.i6" class=""></path></svg>

src/layout/components/Sidebar/Logo.vue

@@ -2,7 +2,7 @@
   <div class="brand">
     <img
       class="logo"
-      src="~@/assets/logo.png"
+      src="~@/assets/logo.svg"
       @click="goHome"
     >
     <div class="title">Vue3 Element Admin</div>

vite.config.js

@@ -9,12 +9,19 @@ export default env => {
   // console.log(111, env);
 
   return defineConfig({
+    // base: '/vue3-element-admin-site/',
     plugins: [
       vue(),
       viteMockServe({
+        ignore: /^\_/, // 忽略以下划线`_`开头的文件
         mockPath: "mock", // 指定mock目录中的文件全部是mock接口
-        localEnabled: env.mode === "mock", // 指定在mock模式下才启动mock服务（可以在package.json的启动命令中指定mode为mock）
         supportTs: false, // mockPath目录中的文件是否支持ts文件，现在我们不使用ts，所以设为false
+        localEnabled: env.mode === "mock", // 开发环境是否开启mock功能（可以在package.json的启动命令中指定mode为mock）
+        prodEnabled: env.mode === "mock", // 生产环境是否开启mock功能
+        injectCode: `
+          import { setupProdMockServer } from '../mock/_createProductionServer';
+          setupProdMockServer();
+        `,
       }),
       viteSvgIcons({
         // 指定需要缓存的图标文件夹
@@ -26,7 +33,8 @@ export default env => {
     css: {
       preprocessorOptions: {
         scss: {
-          additionalData: '@import "./src/assets/style/global-variables.scss";' // 全局变量
+          // 全局变量
+          additionalData: '@import "./src/assets/style/global-variables.scss";' 
         }
       }
     },
@@ -44,5 +52,25 @@ export default env => {
         },
       },
     },
+    esbuild: false,
+    build: {
+      terserOptions: {
+        compress: {
+          keep_infinity: true,
+          // 删除console
+          drop_console: true,
+        },
+      },
+      // 禁用该功能可能会提高大型项目的构建性能
+      brotliSize: false,
+      rollupOptions: {
+        output: {
+          // 拆分单独模块
+          manualChunks: {
+            'element-plus': ['element-plus']
+          }
+        }
+      },
+    },
   });
 };