如何使用公共文件夹中的index.html配置Vite

Question

在我使用 Vite 的 React 应用程序中，我想将

index.html

放在

public

文件夹中。结构如下：

root/
├── public/
│   └── index.html
├── index.js
└── vite.config.js

在

index.html

中有这样一行：

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

Vite 配置如下：

export default defineConfig(() => {
    return {
        define: {
            'process.env': {}
        },
        server: {
            port: '1112',
            strictPort: true
        },
        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()]
    };
});

当我运行服务器并在浏览器中打开应用程序时，我看到 404 错误。将

index.html

移动到 Vite 配置旁边的根目录中，它就可以工作了。我究竟做错了什么？谢谢

Answer 1

简短回答：你不能。

这里有长答案：https://vitejs.dev/guide/#index-html-and-project-root

看来，您应该将index.html移动到根文件夹，或者您可以重组您的项目，以便您有一个替代根目录，例如使用

vite serve some/sub/dir

来自文档：

指定备用根运行 vite 使用以下命令启动开发服务器 当前工作目录为 root。您可以指定一个替代方案 root 与 vite 服务 some/sub/dir。请注意，Vite 也会解决 它的配置文件（即 vite.config.js）位于项目根目录中，所以 如果根目录更改，则需要移动它。