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

本文主要是介绍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.tsimport { 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和jsimport { 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]'}},