Vite+Lit Element项目作为Bundle供其他应用时资源加载404求助

一、问题核心 #

就是相对路径配置的问题。Vite默认用绝对路径打包资源，当你的bundle.js被其他应用在非根目录环境下引用时，绝对路径会指向错误位置，导致dist/assets里的图片、字体找不到。

二、修改Vite配置文件 #

在vite.config.js中添加相对路径配置，让打包后的资源路径适配任意部署位置：

import { defineConfig } from 'vite';
import { litPlugin } from 'vite-plugin-lit';

export default defineConfig({
  plugins: [litPlugin()],
  base: './', // 关键设置：将资源基准路径改为相对路径
  build: {
    outDir: 'dist', // 确保输出目录与你的结构一致
    assetsDir: 'assets', // 指定资源打包到assets文件夹
  },
});

三、Lit Element中正确引用资源 #

在组件里不要写死资源路径，用ES模块导入的方式让Vite自动处理路径映射：

图片引用示例 #

import { LitElement, html } from 'lit';
// 直接导入资源文件，Vite会自动处理路径
import demoImage from './assets/demo.png';

class DemoComponent extends LitElement {
  render() {
    return html`
      <img src="${demoImage}" alt="演示图片">
    `;
  }
}
customElements.define('demo-component', DemoComponent);

字体引用示例（style.scss中） #

@font-face {
  font-family: 'CustomFont';
  // 用相对路径引用字体，Vite打包时会自动转换为正确路径
  src: url('./assets/custom-font.ttf') format('truetype'),
       url('./assets/custom-font.woff2') format('woff2');
}

四、验证修复效果 #

重新执行npm run build，检查dist/assets目录是否包含所有图片、字体文件，同时查看打包后的bundle.js或css文件，确认资源路径是以./assets/xxx开头的相对路径即可。

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