Vite.js多入口配置后HTML缺失脚本引用问题排查

以下是针对你遇到的问题的具体排查步骤，覆盖单/多入口场景：

1. 验证入口配置格式是否正确 #

Vite的build.rollupOptions.input配置必须严格匹配路径规则：

• 单入口需传入字符串路径，确保指向项目中真实存在的入口文件：

  export default {
    build: {
      rollupOptions: {
        input: './src/main.jsx' // 路径相对于项目根目录，根据实际结构调整
      }
    }
  }
  

• 多入口需传入键值对对象，每个键对应一个HTML入口的名称：

  export default {
    build: {
      rollupOptions: {
        input: {
          main: './src/main.jsx',
          admin: './src/admin-entry.jsx'
        }
      }
    }
  }
  

注意：路径错误会导致Vite无法识别入口，自然不会生成脚本引用。

2. 检查HTML模板的脚本标签 #

Vite依赖HTML模板中的type="module"脚本标签来自动注入构建产物，必须保证：

• 模板中存在指向入口文件的脚本标签，例如：

  <script type="module" src="/src/main.jsx"></script>
  

• 不要手动写死构建后的哈希文件名（如main.abc123.js），Vite会自动替换为正确的产物路径。
• 如果是多入口，每个HTML模板需对应各自的入口脚本标签。

3. 排查插件干扰问题 #

第三方Rollup/Vite插件可能破坏默认的HTML注入逻辑：

• 临时移除所有非必要插件（如自定义压缩、打包插件），仅保留Vite默认配置。
• 清除缓存目录（node_modules/.vite）和dist目录，重新执行npm run build测试。

4. 确认root配置是否正确 #

如果在vite.config.js中设置了root选项，所有路径必须相对于该目录：

export default {
  root: './src', // 此时input路径需相对于src目录
  build: {
    rollupOptions: {
      input: './main.jsx'
    }
  }
}

错误的root配置会导致Vite找不到入口文件，进而无法生成脚本引用。

5. 升级Vite到稳定版本 #

部分旧版本Vite存在入口处理的已知bug，建议升级到最新稳定版：

npm install vite@latest

升级后清除缓存和旧构建产物，重新构建验证。

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