Vite多页应用中如何正确配置不同页面的入口JS文件？

这个问题根本原因是 Vite 的多页应用构建配置需要更完整的处理。我来详细解释下正确的配置方式：

首先你要知道 Vite 在构建多页应用时，每个页面的资源路径处理其实分为两个部分：
1. HTML 文件的路径处理
2. JS/CSS 等静态资源的路径处理

你当前的配置只解决了第一部分。对于 JS 文件路径问题，需要额外配置 build.rollupOptions.output。我来给你一个完整的配置示例：

import { resolve } from 'path'

import { defineConfig } from 'vite'



export default defineConfig({

  build: {

    rollupOptions: {

      // 入口文件配置

      input: {

        index: resolve(__dirname, 'src/index.html'),

        about: resolve(__dirname, 'src/about.html')

      },

      // 输出文件配置

      output: {

        // 指定 chunk 文件名格式

        chunkFileNames: 'assets/[name]-[hash].js',

        // 指定入口 chunk 文件名格式

        entryFileNames: 'assets/[name]-[hash].js',

        // 静态资源文件名格式

        assetFileNames: 'assets/[name]-[hash][extname]'

      }

    }

  }

})

这里有几个关键点需要注意：

1. entryFileNames 控制入口 JS 文件的命名规则，这里我们统一放到 assets 目录下，并且带上 hash

2. 你可能还需要检查 HTML 文件中的 script 标签是否正确。Vite 会自动处理，但如果你手动写了 script 标签，记得用相对路径或者删除手动标签让 Vite 自动注入

3. 对于开发环境，确保你的服务器配置支持多页路由。可以在 vite.config.js 中添加：

server: {

  open: '/index.html'

}

如果还有问题，可以检查下 dist 目录生成的文件结构是否符合预期。现代前端工具链有时候确实挺折腾的，特别是这种多页应用的配置，我之前也被坑过好几次...

补充一点，如果你发现某些资源还是路径不对，可以试试在 vite.config.js 里加个 base 配置项：

base: './'

这样会强制所有资源使用相对路径引用，适合静态站点部署。

我之前踩过这个坑，Vite 的多页配置其实有个隐藏逻辑：你把 input 指向 .html 文件是对的，但 Vite 会把每个 HTML 当作一个“页面入口”，然后自动解析它里面引用的 JS（通过 <script type="module" src="xxx">），而不是你自己去写 JS 文件路径。

你现在的配置问题在于：你把 input 写成了 src/index.html 这种形式，但 Vite 默认只会在 index.html 同级目录下找 JS 文件，而且它注入的 <script> 标签路径是基于 HTML 文件的相对路径，不是按你预期的 /assets/xxx.js 来生成的。

正确的做法是：

1. 确保每个 HTML 文件里显式写好 JS 的引用路径，比如 about.html 里得有 <script type="module" src="./about.js"></script>（注意是相对路径）
2. 把 input 的值改成 JS 文件路径，而不是 HTML —— 对，Vite 官方推荐的是 input: { index: 'src/index.js', about: 'src/about.js' }，然后每个 JS 文件里再 import 对应的 HTML（或者用 html 插件）

但如果你坚持用 HTML 做入口（虽然不推荐），那得这样配：

import { resolve } from 'path'



export default defineConfig({

  build: {

    rollupOptions: {

      input: {

        index: resolve(__dirname, 'src/index.html'),

        about: resolve(__dirname, 'src/about.html')

      }

    }

  },

  resolve: {

    alias: {

      '@': resolve(__dirname, 'src')

    }

  }

})

然后确保每个 HTML 文件里引用的 JS 路径是相对路径，比如 about.html 里写 <script type="module" src="./about.js"></script>，并且 about.js 放在和 about.html 同级目录下。

但更推荐的、也是我现在的项目在用的方案是：用 JS 做入口，HTML 由 vite-plugin-html 或 vite-plugin-pages 来生成，这样不会出现路径错乱的问题。比如：

import { resolve } from 'path'



export default defineConfig({

  build: {

    rollupOptions: {

      input: {

        index: resolve(__dirname, 'src/pages/index/main.js'),

        about: resolve(__dirname, 'src/pages/about/main.js')

      }

    }

  }

})

然后在每个 main.js 里：

import '../index.html'

或者更干净的做法是用 vite-plugin-pages，自动按 src/pages 下的文件生成入口，省心不少。

总之你那个路径不对的问题，99% 是因为 HTML 里写的 JS 引用路径是绝对路径（比如 /about.js），或者 JS 文件根本没放在对应位置。改用相对路径 + JS 入口，基本就稳了。