Vite打包Lit.js生产包报错：无法解析入口文件index.html

为什么Vite初始化的Lit项目默认需要HTML文件？ #

这不是Lit的要求，而是Vite的默认规则——Vite本质是一个以HTML为入口的构建工具，它会通过解析HTML里的<script>标签来追踪项目依赖、完成打包流程。Lit官方的Vite模板沿用了这个默认配置，所以Vite启动或构建时会自动寻找index.html作为入口文件，删除后自然会报错找不到入口。

如何配置仅打包出JS文件？ #

要做纯JS的第三方插件，需要把Vite切换为库模式，并指定TS/JS文件作为入口，具体步骤如下：

1. 保留你的入口文件（比如src/app.ts），不需要HTML文件
2. 修改vite.config.ts，配置库模式与入口：

   import { defineConfig } from 'vite';
   import { litPlugin } from 'vite-plugin-lit';
   
   export default defineConfig({
     plugins: [litPlugin()],
     build: {
       // 配置库模式的核心参数
       lib: {
         entry: './src/app.ts', // 你的插件入口文件
         name: 'CustomLitPlugin', // CDN加载时的全局变量名（比如window.CustomLitPlugin）
         formats: ['es', 'umd'], // 输出的模块格式：ES模块+兼容UMD格式
         fileName: (format) => `lit-custom-plugin.${format}.js` // 输出文件名
       },
       // 覆盖Rollup的默认配置，禁用HTML入口
       rollupOptions: {
         // 如果你的Lit是通过CDN加载的，这里声明external避免打包Lit代码
         external: ['lit'],
         output: {
           // 映射外部依赖的全局变量（比如CDN加载的Lit会挂载到window.Lit）
           globals: {
             lit: 'Lit'
           }
         }
       }
     }
   });
   

3. 保持原构建脚本tsc && vite build即可，执行后会在dist目录生成对应的JS文件
4. 后续可以直接通过CDN引入生成的JS文件，脚本会自动动态注入你的Lit自定义组件

注意：如果不需要UMD格式，只保留['es']即可；如果你的插件不需要依赖外部CDN的Lit，就删掉external和globals配置，Vite会把Lit代码打包进你的插件里。

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