React+TS环境下Vite多页面应用无法显示其他页面问题

问题描述 #

按Vite多页面应用配置规范设置生产构建入口后，开发环境无法正常访问自定义页面。期望将所有页面统一放在./src/pages目录下（如index.html、login.html），并通过http://127.0.0.1:5173、http://127.0.0.1:5173/login等路径直接访问。

当前遇到的具体问题：

• 主入口./index.html移至./src目录后应用无法启动
• 访问http://127.0.0.1:5173/test时始终显示主入口内容，无法加载测试页面

当前配置文件与代码 #

vite.config.ts #

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { resolve } from 'path';

const root = resolve(__dirname, 'src');

export default defineConfig({
  plugins: [react()],
  server: { proxy: { "/api": "http://localhost:5000/" } },
  build: {
    manifest: true,
    emptyOutDir: true,
    rollupOptions: {
      input: {
        main: resolve(root, 'index.html'),
        login: resolve(root, 'pages', 'login.html'),
        test: "test/index.html"
      }
    },
  },
});

根目录下的index.html #

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/modo.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + React + TS</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="src/main.tsx"></script>
</body>
</html>

./src/main.tsx #

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

./test/index.html #

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/modo.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + React + TS</title>
</head>
<body>
  <div id="test">iiejfhiewh</div>
  <h1>test</h1>
  <script type="module" src="Test.tsx"></script>
</body>
</html>

./test/Test.tsx #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

ReactDOM.createRoot(document.getElementById('test')!).render(
  <React.StrictMode>
    <h1>Test page</h1>
  </React.StrictMode>,
);

开发环境配置修正方案 #

1. 统一项目服务根目录指向src
   Vite默认以项目根目录作为开发服务的根目录，需在配置中显式指定root，确保所有页面入口都基于src目录：

   export default defineConfig({
     root: resolve(__dirname, 'src'), // 明确设置服务根目录为src
     plugins: [react()],
     // ...其他配置
   })
   

2. 调整HTML文件引用路径

   • 将原根目录的index.html移至src目录下，修改其script引用路径（因root已设为src，相对路径直接指向同目录的main.tsx）：

     <script type="module" src="./main.tsx"></script>
     

   • 修正rollupOptions.input的路径，确保所有入口都基于新的root：

     rollupOptions: {
       input: {
         main: resolve(root, 'index.html'),
         login: resolve(root, 'pages/login.html'),
         // 若测试页面移至src/pages/test.html，路径改为resolve(root, 'pages/test.html')
       }
     }
     

3. 实现无后缀的页面访问路径
   默认开发环境需访问http://127.0.0.1:5173/pages/login.html，若要简化为/login，需在server配置中添加中间件重写：

   server: {
     proxy: { "/api": "http://localhost:5000/" },
     async middleware(app) {
       app.use((req, res, next) => {
         // 匹配无后缀的非根路径，重写为对应html文件
         if (!req.url?.includes('.') && req.url !== '/') {
           req.url = `/pages${req.url}.html`;
         }
         next();
       });
     }
   }
   

   此时访问http://127.0.0.1:5173/login会自动映射到src/pages/login.html。

4. 统一页面存放目录
   建议将所有页面（包括test页面）移至src/pages目录下，避免跨目录的路径混乱，便于统一管理。

项目目录树展示方法 #

• Windows系统：打开终端进入项目根目录，执行命令：

  tree /F
  

• macOS/Linux系统：先通过包管理器安装tree工具（如brew install tree或sudo apt install tree），再执行：

  tree -L 2 # -L 2表示只显示2级目录，可按需调整层级
  

内容的提问来源于stack exchange，提问作者m3.b