refactor: 个人中心页面重构和布局代码优化

vite.config.ts

@@ -1,12 +1,6 @@
 import vue from "@vitejs/plugin-vue";
 import type { PluginOption } from "vite";
-import {
-  type ConfigEnv,
-  type PreRenderedAsset,
-  type UserConfig,
-  loadEnv,
-  defineConfig,
-} from "vite";
+import { type ConfigEnv, type UserConfig, loadEnv, defineConfig } from "vite";
 
 import AutoImport from "unplugin-auto-import/vite";
 import Components from "unplugin-vue-components/vite";
@@ -218,17 +212,20 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
           // 用于命名代码拆分时创建的共享块的输出命名
           chunkFileNames: "js/[name].[hash].js",
           // 用于输出静态资源的命名
-          assetFileNames: (assetInfo: PreRenderedAsset) => {
-            if (!assetInfo.name) {
+          assetFileNames: (assetInfo) => {
+            const assetName = assetInfo.names[0];
+
+            if (!assetName) {
               return "assets/[name].[hash][extname]";
             }
-            const info = assetInfo.name.split(".");
+
+            const info = assetName.split(".");
             let extType = info[info.length - 1];
-            if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(assetInfo.name)) {
+            if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(assetName)) {
               extType = "media";
-            } else if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(assetInfo.name)) {
+            } else if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(assetName)) {
               extType = "img";
-            } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)) {
+            } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetName)) {
               extType = "fonts";
             }
             return `${extType}/[name].[hash].[ext]`;