Vue + Vite项目构建后页面空白问题求助

针对你遇到的构建后页面空白、index.html内容为空但dev服务正常的问题，按以下步骤排查解决：

1. 检查入口文件与挂载逻辑 #

Vite默认以src/main.js（或main.ts）为入口，确保该文件正确初始化Vue实例并挂载到页面：

import { createApp } from 'vue'
// 直接引入pages下的index.vue作为根组件
import App from './pages/index.vue'

// 挂载到public/index.html中的#app节点
createApp(App).mount('#app')

同时确认public/index.html中存在挂载节点：

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>

2. 路由配置检查（若使用Vue Router） #

如果项目依赖Vue Router，需确保路由配置正确且默认路由指向首页：

// src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import Index from '../pages/index.vue'

const routes = [
  {
    path: '/',
    component: Index
  }
]

const router = createRouter({
  // 配合base: './'，使用hash模式避免路径问题
  history: createWebHashHistory(),
  routes
})

export default router

并在main.js中挂载路由：

import router from './router'
createApp(App).use(router).mount('#app')

同时根组件（如App.vue）需包含<router-view />用于渲染路由组件：

<template>
  <router-view />
</template>

3. 验证Vite构建配置 #

完善vite.config.js的build配置，确保输出目录和清理逻辑正常：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: './',
  build: {
    outDir: 'dist', // 指定输出目录
    emptyOutDir: true // 构建前清空输出目录
  }
})

4. 重新执行构建 #

删除现有dist文件夹，重新执行构建命令：

rm -rf dist
npm run build

构建完成后检查dist/index.html是否有正常的内容输出，以及assets文件夹是否包含编译后的静态资源。

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