为什么Javascript/Vite.js多页应用程序在构建时失败？

Question

这个问题是11月20日更新的，关于上下文，见下面的评论

我正在构建一个使用HTML/Javascript和Vite的多页面应用程序。在开发和生产服务器中，一切都是完美的--直到我需要访问需要用户登录的页面。我能够导航到登录页面并成功地访问login...but，然后当我尝试将登录用户路由到home.html页面时，我会遇到一个问题。

当将home.html添加到我的配置文件时，构建会中断。我说了一个错误：[vite:build-html] EISDIR: illegal operation on a directory, read file: /Users/mickeyvershbow/Documents/coding/vite-projects/ekkobar-app/vite-web-app/pages/home/home.html error during build: Error: EISDIR: illegal operation on a directory

我在配置文件中指定入口点的方式一定有问题，但我不知道如何解决这个问题，在vite文档中也找不到这方面的任何信息。有我需要使用的插件吗？一些中间件？

档案结构：

├── package.json
├── vite.config.js
├── index.html
├── main.js
├── styles.css
├── pages
│   ├── login
│   │   ├── login.html
│   │   ├── login.js
│   ├── home
│   │   ├── home.html **requires user to be logged in
│   │   ├── home.js
│   │     

vite.config.js

const { resolve } = require("path");
const { defineConfig } = require("vite");

module.exports = defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
        login: resolve(__dirname, "pages/login/login.html"),
        home: resolve(__dirname, "pages/home/home.html"),
      },
    },
  },
});

Answer 1

您在问题中共享的文件夹结构显示，您的登录页和主页是存在于您的页面中的文件夹。因此，您必须为您的vite提供有效的路径，以包含文件夹中的文件。

您的文件夹路径现在变为"pages/login/index.html"和"pages/home/index.html"

请在下面找到更新的vite配置。

const { resolve } = require("path");
const { defineConfig } = require("vite");

module.exports = defineConfig({
    build: {
        rollupOptions: {
            input: {
                main: resolve(__dirname, "index.html"),
                login: resolve(__dirname, "pages/login/index.html"),
                home: resolve(__dirname, "pages/home/index.html"),
            },
        },
    },
});