index.html 入口文件

Vite 与传统构建工具不同，index.html 是项目入口而非 JS 文件。

入口位置

HTML

project/
├── index.html      # 入口文件（根目录）
├── src/
│   └── main.js     # 应用入口脚本
└── vite.config.js

标准结构

HTML

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

type="module" 必要性

JavaScript

<!-- 必须使用 type="module" -->
<script type="module" src="/src/main.js"></script>

<!-- 普通 script 无法加载 ES 模块 -->
<script src="/src/main.js"></script>  <!-- ✗ 错误 -->

注意：type="module" 是 Vite 正确加载 ES 模块的必要条件。

入口特点

特点	说明
位置	项目根目录
作用	Vite 入口，不是 src/main.js
script	必须使用 type="module"
资源	可引用 public 目录资源

多入口配置

HTML

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: 'index.html',
        admin: 'admin.html'
      }
    }
  }
})

HTML 环境变量

text

<title>%VITE_APP_TITLE%</title>
<meta name="description" content="%VITE_APP_DESC%">

<link rel="icon" href="%BASE_URL%/favicon.ico" />

要点总结

index.html 是 Vite 入口文件
位于项目根目录
script 必须使用 type="module"
支持 %变量名% 替换环境变量