vuetify3+vite，打包后mdi图标无法正常显示，及打包后首页白屏

1、图标无法正常显示

在这里插入图片描述

【因为我的vite.config.ts配置中使用了vite-plugin-css-injected-by-js这个插件】

为了优化我的项目，我使用了很多插件，vite-plugin-css-injected-by-js就是其中一个，项目本地运行是正常的，但是当我使用uniapp打包成app安装测试，发现图标无法正常显示，而且是针对vuetify中常使用的@mdi/font无法正常显示，我项目中还使用了@iconify/vue图标不受影响正常显示，我估计可能是因为图标的类型有关，每次测试都要打包安装太麻烦了，具体原因就不深究了

解决方式就是不要使用vite-plugin-css-injected-by-js

这是我有问题的的vite.config.ts文件，把vite-plugin-css-injected-by-js去掉，再打包图片显示就正常了

//vite.config.ts

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'

import AutoImport from "unplugin-auto-import/vite";
import AutoComponents from 'unplugin-vue-components/vite'

// import viteCompression from 'vite-plugin-compression'//gzip压缩,过小的文件压缩会导致比不压缩还大，因为压缩的时候要写入一个映射字典，反而最后比压缩前还大了。但是这个是Byte层面的，可以忽略不计
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'//合并css和js

import { fileURLToPath, URL } from "node:url";


export default defineConfig({
  plugins: [
    Vue({
      template: { transformAssetUrls }
    }),
    cssInjectedByJsPlugin(),//不要使用，会导致打包后图标无法正常显示
    AutoImport({
      imports: ["vue", "vue-router", "pinia"],
      dts: "src/auto-imports.d.ts"
    }),
    AutoComponents({
      dirs: [
        'src/**/components/**',
        "src/components/**",
      ],
      extensions: ['vue'],
      deep: false, //搜索子目录
      dts: "src/components.d.ts"
    }),
    Vuetify({
      autoImport: true,
      styles: { configFile: "src/styles/variables.scss" },
    }),
    // viteCompression({
    //   verbose: true,
    //   disable: false, //开启压缩(不禁用)
    //   deleteOriginFile: false, //删除源文件
    //   threshold: 10240, //压缩前最小文件大小
    //   algorithm: 'gzip', //压缩算法
    //   ext: '.gz', //文件类型
    // }),
  ],
  resolve: {
    alias: {
      "~": fileURLToPath(new URL("./", import.meta.url)),
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
    extensions: [".js", ".json", ".jsx", ".mjs", ".ts", ".tsx", ".vue"],
  },
  base: './',//避免打包白屏
  server: {
    host: '0.0.0.0',
    // open: true,
    port: 4399,
    proxy: {}
  },
  css: {
    preprocessorOptions: {
      scss: { additionalData: '@import "@/styles/variables.scss";' },
    },
  },
  build: {
    target: 'es2020',
    cssMinify: 'esbuild',
    sourcemap: false,//提升速度
    outDir: 'results',
    assetsDir: 'assets',
    assetsInlineLimit: 4096,
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    chunkSizeWarningLimit: 2000,// 提高超大静态资源警告门槛
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ["vue"],
        },
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
      }
    },
  },
})

2、关于打包白屏

我目前发现导致我项目白屏的两个原因

配置中不添加base: './',打包后会白屏，【解决方式就是配置中添加base:'./'】
我配置了manualChunks超大静态资源拆分导致致白屏,【解决方式是注意manualChunks的配置，或者可以不用配置】

manualChunks拆分资源配置导致我的项目打包后白屏

rollupOptions: {
      output: {
        //这样写不会白屏
        manualChunks: {
          vue: ["vue"],
        },
        // 超大静态资源拆分，会导致白屏
        // manualChunks(id) {
        //   if (id.includes('node_modules')) {
        //     return id
        //       .toString()
        //       .split('node_modules/')[1]
        //       .split('/')[0]
        //       .toString();
        //   }
        // },
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
      }
    },