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

Mc.邦威提问于 2026-02-26 14:30:27 阅读 20

前端

我用 Vite 搭建一个多页项目，每个页面都有自己的 JS 入口，但打包后发现只有 index.html 的脚本能正常加载，其他页面比如 about.html 引用的 about.js 找不到。我在 vite.config.js 里是这么配的：

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'src/index.html'),
        about: resolve(__dirname, 'src/about.html')
      }
    }
  }
})

结果 about.html 里自动注入的 script 标签路径不对，指向了 /assets/about-xxx.js，但实际生成的文件名却带了 hash，而且路径也不对。是不是还要额外配置什么？

Vite

我来解答赞 6 收藏

反馈

1 条解答

Des.米阳 Lv1

我之前踩过这个坑，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 入口，基本就稳了。

2026-02-26 15:00