Vite+Lit项目npm run build后页面空白的vite.config.ts配置问题

架构老林

2026-8-15

问题分析与解决方案

你的问题出在Vite配置同时混用了库构建模式和网页应用构建模式，导致生产构建逻辑冲突，组件无法正常加载。

核心问题点

配置里的lib选项是用来打包可复用组件库的，而你实际要构建的是完整网站应用，两者构建目标完全不同，同时启用会让Rollup（Vite底层打包工具）的打包逻辑混乱，最终产物无法正确加载组件。另外，external: /^lit/会把Lit相关模块排除在打包产物外，生产环境浏览器找不到这些依赖，也会导致组件加载失败。

修改后的vite.config.ts配置

import { resolve } from 'path';
import { defineConfig } from 'vite';

const outDir = resolve(__dirname, 'dist');

export default defineConfig({
  build: {
    outDir,
    emptyOutDir: true,
    cssCodeSplit: true,
    minify: false,
    manifest: true,
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
      },
      // 移除external配置，除非你是通过CDN引入Lit
      // external: /^lit/ 
    }
  }
})

关键修改说明

移除lib配置块：这是解决问题的核心，因为你不需要构建组件库，只需要构建完整网页应用
移除external: /^lit/：如果Lit是你通过npm install lit安装的项目依赖，必须把它打包进产物，否则浏览器运行时找不到Lit模块；如果是通过CDN引入Lit，可以保留这个配置，但要确保index.html里正确引入了Lit的CDN链接
其他配置项（如outDir、cssCodeSplit等）可以根据你的需求保留

额外检查点

确认你的src/index.ts里正确注册了自定义元素，比如：

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('my-component')
class MyComponent extends LitElement {
  render() {
    return html`<div>Hello Lit</div>`;
  }
}