Vite项目实战：如何自定义启动入口文件名？附完整配置代码

Vite项目实战：如何自定义启动入口文件名？附完整配置代码

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议。转载请附上原文出处链接及本声明
原文链接：https://editor.youkuaiyun.com/md/?articleId=146167121

---

📖 摘要

本文详细讲解如何修改Vite项目的默认启动入口文件index.html，覆盖单入口/多入口配置、开发/生产环境差异处理等核心场景，提供可直接复用的配置代码，助你轻松定制项目结构！

---

🗂️ 目录

1. 修改默认入口文件（单入口）
2. 自定义输出文件名
3. 多入口文件配置
4. 高频问题解决方案
5. 完整配置示例

---

1️⃣ 修改默认入口文件（单入口配置）

步骤说明

通过修改vite.config.js中的build.rollupOptions.input属性，可指定新的入口文件：

// vite.config.js
import { defineConfig } from 'vite'
import path from 'path' // 需先安装 path 模块

export default defineConfig({
  build: {
    rollupOptions: {
      input: path.resolve(__dirname, 'src/main.html') // 新入口文件路径
    }
  }
})

注意事项

• 📌 必须保留HTML文件中的脚本引用：

  <!-- 必须包含以下结构 -->
  <script type="module" src="/src/main.js"></script>
  

• 📌 开发环境（npm run dev）默认仍使用根目录的index.html

---

2️⃣ 自定义输出文件名

配置方案

通过调整文件存储位置实现文件名修改：

// vite.config.js
build: {
  rollupOptions: {
    input: path.resolve(__dirname, 'src/app.html')
  }
}

文件结构调整

原结构：
├── index.html

新结构：
├── src/
   └── app.html

---

3️⃣ 多入口文件配置

多页面应用配置

// vite.config.js
build: {
  rollupOptions: {
    input: {
      main: path.resolve(__dirname, 'src/main.html'),
      admin: path.resolve(__dirname, 'src/admin.html'),
      mobile: path.resolve(__dirname, 'src/mobile.html')
    }
  }
}

构建结果

dist/
   ├── main.html
   ├── admin.html
   └── mobile.html

---

4️⃣ 高频问题解决方案

问题1：开发环境入口文件修改

解决方法：手动将根目录index.html移动到子目录，并执行：

# 开发环境强制指定入口
npx vite --force ./src/main.html

问题2：静态资源404错误

修复方案：检查HTML文件中资源路径是否使用绝对路径：

<!-- 正确写法 -->
<img src="/src/assets/logo.png">

<!-- 错误写法 -->
<img src="./assets/logo.png">

---

5️⃣ 完整配置示例

// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, 'src/main.html'),
        admin: path.resolve(__dirname, 'src/admin.html')
      },
      output: {
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash][extname]'
      }
    }
  }
})

---

💡 总结

通过配置build.rollupOptions.input可实现：
✅ 自定义单入口/多入口文件
✅ 灵活调整输出目录结构
✅ 支持多页面应用开发

遇到问题欢迎在评论区留言讨论！
如果本文对你有帮助，请点赞⭐收藏支持作者~

---

版权声明
未经作者允许禁止转载，侵权必究！
技术交流请私信博主或访问：[https://editor.youkuaiyun.com/md/?articleId=146167121]