Vite配置疑问：将index.html放入public文件夹后出现404错误

你的404错误主要源于两个配置/路径问题：

1. 开发服务器未指定正确入口 #

Vite默认会在项目根目录（root配置项，默认为当前工作目录）下查找index.html作为入口，但你把index.html放在了public子目录中，开发服务器启动后找不到默认入口，因此返回404。

2. index.html中的脚本路径错误 #

根据你提供的项目结构，index.js直接放在根目录下，但你在index.html里写的是../src/index.js，该路径对应的文件并不存在，即便入口正确，脚本也会加载失败。

修复步骤 #

步骤1：修正index.html中的脚本路径 #

将脚本行改为指向根目录index.js的相对路径：

<script type="module" src="../index.js"></script>

若后续计划将源码迁移到src目录，再调整为../src/index.js即可。

步骤2：配置开发服务器加载public/index.html #

修改vite.config.js，补充以下关键配置：

• 指定开发服务器启动时打开public/index.html
• 允许服务器访问项目根目录的文件（默认文件系统限制会阻止跨目录访问根目录下的index.js）

修改后的完整配置如下：

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

export default defineConfig(() => {
    return {
        define: {
            'process.env': {}
        },
        server: {
            port: '1112',
            strictPort: true,
            open: '/public/index.html', // 启动时自动打开正确入口
            fs: {
                allow: [path.resolve(__dirname, './')] // 允许访问项目根目录所有文件
            }
        },
        esbuild: {
            loader: 'jsx',
            include: /src\/.*\.jsx?$/,
            exclude: []
        },
        optimizeDeps: {
            esbuildOptions: {
                plugins: [
                    {
                        name: 'load-js-files-as-jsx',
                        setup(build) {
                            build.onLoad({ filter: /src\/.*\.js$/ }, (args) => ({
                                loader: 'jsx',
                                contents: fs.readFileSync(args.path, 'utf8')
                            }));
                        }
                    }
                ]
            }
        },
        resolve: {
            alias: { ...absolutePathAliases }
        },
        build: {
            rollupOptions: {
                input: {
                    main: path.resolve(__dirname, 'public/index.html'),
                },
            },
            outDir: 'build'
        },
        plugins: [react()]
    };
});

可选方案：将root设为public目录 #

如果你希望public作为Vite的根目录，可以直接修改root配置，让开发服务器默认加载public/index.html，同时调整构建输出目录到上级：

export default defineConfig(() => {
    return {
        root: './public', // 设置根目录为public
        server: {
            port: '1112',
            strictPort: true,
            fs: {
                allow: [path.resolve(__dirname, './')] // 允许访问上级目录文件
            }
        },
        build: {
            outDir: '../build', // 构建输出到项目根目录的build文件夹
            rollupOptions: {
                input: path.resolve(__dirname, 'public/index.html'),
            },
        },
        // 其他原有配置保持不变
    };
});

这种情况下，index.html中的脚本路径依然使用../index.js即可。

完成修改后重启开发服务器，即可正常访问应用。

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