如何修复Vite 3搭配Vue/TypeScript/Vuetify的Lighthouse错误？

问题背景 #

使用Vite 3搭配Vue/TypeScript/Vuetify开发项目，通过Chrome开发者工具运行Lighthouse检测时出现错误。以下是关键文件内容：

vite preview生成的打包后HTML #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <link rel="apple-touch-icon" href="/favicon.png">
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#6E2D91">
    <meta name="description" content="Sample Web App">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <script type="module" crossorigin src="/assets/index.79acedba.js"></script>
    <link rel="stylesheet" href="/assets/index.4a576584.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

原始HTML模板 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <link rel="apple-touch-icon" href="/favicon.png">
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#6E2D91">
    <meta name="description" content="Sample Web App">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Lighthouse错误截图 #

针对性修复方案 #

1. 修复空页面标题 #

Lighthouse强制要求页面有明确标题，这对SEO和可访问性至关重要。

• 修改原始HTML模板的<title>标签，填充具体内容：

  <title>Sample Web App</title>
  

2. 优化JavaScript加载位置，避免阻塞渲染 #

打包后的<script>被插入到<head>中会阻塞页面首次渲染，需配置Vite将脚本放到<body>末尾：

• 在vite.config.ts中添加Rollup配置：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import vuetify from 'vite-plugin-vuetify'
  
  export default defineConfig({
    plugins: [vue(), vuetify()],
    build: {
      rollupOptions: {
        output: {
          // 指定脚本插入到body末尾
          entryFileNames: 'assets/[name].[hash].js',
          chunkFileNames: 'assets/[name].[hash].js',
          assetFileNames: 'assets/[name].[hash].[ext]',
          manualChunks: undefined,
        },
      },
    },
  })
  

• 重新打包后，脚本会自动插入到<body>的#app元素之后，消除渲染阻塞。

3. 移除未使用的CSS（Vuetify专属优化） #

Vuetify默认加载全量样式，Lighthouse会提示移除冗余代码，可通过两种方式优化：

方式一：开启Vuetify按需引入

在vuetify.config.ts中配置仅导入使用的组件：

import { createVuetify } from 'vuetify'
import 'vuetify/styles'
// 只导入项目中用到的组件
import { VApp, VBtn, VCard } from 'vuetify/components'
import { aliases, mdi } from 'vuetify/iconsets/mdi'

export default createVuetify({
  components: {
    VApp,
    VBtn,
    VCard,
    // 按需添加其他组件
  },
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: { mdi },
  },
})

方式二：使用PurgeCSS自动清理冗余样式

安装rollup-plugin-purgecss后，在Vite配置中添加：

import PurgeCSS from 'rollup-plugin-purgecss'

export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [
        PurgeCSS({
          content: ['./index.html', './src/**/*.vue', './src/**/*.ts'],
          safelist: { standard: [/v-/] }, // 保留Vuetify基础类名
        }),
      ],
    },
  },
})

4. 优化Viewport配置 #

添加viewport-fit=cover以支持刘海屏设备，符合Lighthouse最佳实践：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

5. 检查Manifest和图标资源 #

• 确保manifest.json中配置了192x192和512x512尺寸的图标；
• 确保favicon.png存在且包含16x16、32x32两种尺寸。

内容的提问来源于stack exchange，提问作者omega