Vite本地服务器启动后localhost显示空白页面问题咨询

以下是针对你遇到的「Vite启动无报错但页面空白」问题的排查方向：

• 确认根容器挂载逻辑
  检查src/main.ts中的挂载代码是否正确关联了index.html里的DOM容器：

  // main.ts（Vue示例，React逻辑类似）
  import { createApp } from 'vue'
  import App from './App.vue'
  
  // 确保选择器与index.html中的容器ID完全一致
  const rootElement = document.getElementById('app')
  if (!rootElement) {
    console.error('根容器元素未找到')
    return
  }
  createApp(App).mount(rootElement)
  

  同时验证index.html中存在对应容器：

  <!-- index.html -->
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
  

• 检查浏览器控制台的隐性错误
  终端无报错不代表浏览器运行时无异常，打开浏览器开发者工具（F12）的「Console」面板，查看是否存在TypeScript类型报错、资源加载失败或运行时逻辑错误——这类错误可能导致代码中断执行，从而出现空白页。

• 验证路由渲染出口
  若使用路由框架（如Vue Router/React Router），确认根组件（如App.vue/App.tsx）中存在路由渲染出口：

  <!-- Vue Router 示例 -->
  <template>
    <router-view /> <!-- 缺失该标签会导致路由内容无法渲染 -->
  </template>
  

  // React Router 示例
  import { Outlet } from 'react-router-dom'
  
  function App() {
    return <Outlet /> // 必须存在该组件才能渲染路由内容
  }
  

• 排查Vite配置的base路径
  打开vite.config.ts，若设置了base选项（如base: '/my-app/'），访问时需要加上对应子路径（如localhost:5173/my-app/）；若无需子路径，直接删除base配置（默认值为'/'）。

• 清除缓存并重建依赖
  执行以下步骤重置环境：

  1. 停止当前服务，执行rm -rf node_modules package-lock.json（Windows用rmdir /s /q node_modules && del package-lock.json）
  2. 重新安装依赖：npm install
  3. 清除浏览器缓存或使用无痕模式启动服务：npm run dev

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