Vue 3 和 Vite 构建或预览时为什么显示空白页面？故障排除指南

2024-03-24 10:27:35

Vue 3 和 Vite 构建或预览显示空白页面：故障排除指南

简介

在使用 Vue 3、Vite 和 TypeScript 构建或预览应用程序时遇到空白页面但没有任何错误日志是一个令人沮丧的问题。本文将深入探讨这个问题，提供解决方法并提供一个全面的常见问题解答部分。

问题

当在开发模式下使用 npm run dev 启动应用程序时，一切正常。但在使用 npm run build 构建或 npm run preview 预览它时，浏览器中只会显示空白页面，JavaScript 控制台中也没有错误。即使访问根路由（/）或其他公共路由（/login），也会出现此问题。

诊断和解决方案

通过使用 Chrome Vue Devtools，可以观察到以下现象：

开发模式下：<RouterView> 组件出现在<Root> 组件中。
预览或生产模式下：<RouterView> 组件不存在。

这表明在构建过程中存在一个问题，导致路由和组件的正确呈现被阻止。

解决此问题的关键是确保适当安装并配置所有必需的插件和依赖项。尤其重要的是 Vue Router、Vuex 和 Vuex Devtools。

具体步骤

检查依赖项和插件版本： 确保使用最新版本的 Vue、Vue Router 和 Vuex。
正确配置插件： 仔细检查 Vite 插件的配置，确保它们与 Vue Router 和 Vuex 兼容。
使用模式构建： 使用 --mode production 标记运行构建命令（npm run build --mode production），以强制执行生产模式构建。这有助于识别并解决与开发模式不一致的问题。
检查网络请求： 使用网络面板（例如 Chrome Devtools 中的“网络”选项卡）检查构建后的应用程序是否向正确的端点发出请求。确保后端服务正在运行并且可以访问。
禁用代码分割： 尝试禁用代码分割以确定它是否是问题所在。在 Vite 配置中，将 build.rollupOptions.output.manualChunks 设为 undefined。

常见问题解答

1. 如何确保适当安装了 Vue Router 和 Vuex？

npm install vue-router vuex

2. 如何配置 Vite 插件？

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueRouter from 'vite-plugin-vue-router'

export default defineConfig({
  plugins: [
    vue(),
    vueRouter(),
  ],
})

3. 如何使用模式构建？

npm run build --mode production

4. 如何检查网络请求？

在构建后应用程序的 Chrome Devtools 中，转到“网络”选项卡并刷新页面。检查请求是否指向正确的端点。

5. 如何禁用代码分割？

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueRouter from 'vite-plugin-vue-router'

export default defineConfig({
  plugins: [
    vue(),
    vueRouter({
      rollupOptions: {
        output: {
          manualChunks: undefined,
        },
      },
    }),
  ],
})