Vite引入内部ui-modal库报错：未配置.html文件加载器

方案1：用raw-loader处理HTML文件（仅转成字符串） #

这个方案对应webpack中text-loader的功能，把HTML文件内容作为字符串导出。

1. 安装依赖

npm install raw-loader --save-dev

2. 修改vite.config.js，添加对目标HTML文件的处理规则：

import { defineConfig } from 'vite'

export default defineConfig({
  // 开发环境配置：让esbuild把HTML文件当成文本处理
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.html': 'text',
      },
    },
  },
  // 生产构建配置：用rollup插件转译HTML为字符串导出
  build: {
    rollupOptions: {
      plugins: [
        {
          name: 'html-loader',
          transform(code, id) {
            if (id.endsWith('.html') && id.includes('ui-modal')) {
              return `export default ${JSON.stringify(code)}`
            }
          },
        },
      ],
    },
  },
})

方案2：处理带EJS模板的HTML文件 #

从你提供的toast.html来看，里面包含EJS模板语法（<% %>），直接转字符串无法正常渲染，需要先编译模板：

1. 安装依赖

npm install ejs raw-loader --save-dev

2. 修改vite.config.js，添加自定义插件编译EJS：

import { defineConfig } from 'vite'
import ejs from 'ejs'

export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        {
          name: 'ejs-html-loader',
          setup(build) {
            build.onLoad({ filter: /\.html$/, namespace: '' }, async (args) => {
              if (!args.path.includes('ui-modal')) return;
              const fs = await import('fs/promises');
              const content = await fs.readFile(args.path, 'utf8');
              // 编译EJS为客户端可执行的渲染函数
              const compiled = ejs.compile(content, {
                client: true,
                filename: args.path,
              });
              return {
                contents: `export default ${compiled.toString()}`,
                loader: 'js',
              };
            });
          },
        },
      ],
    },
  },
  build: {
    rollupOptions: {
      plugins: [
        {
          name: 'ejs-html-build-loader',
          async transform(code, id) {
            if (!id.endsWith('.html') || !id.includes('ui-modal')) return;
            const compiled = ejs.compile(code, {
              client: true,
              filename: id,
            });
            return `export default ${compiled.toString()}`;
          },
        },
      ],
    },
  },
})

配置完成后，导入的HTML会变成可调用的渲染函数，传入data参数即可生成对应DOM字符串。

方案3：修改私有库的编译配置（长期方案） #

如果有权限修改内部私有库ui-modal的webpack配置，建议直接在库的编译流程中处理HTML文件：

• 在库的webpack配置中，给.html文件添加html-loader或ejs-loader，编译后把模板内容直接打包到输出文件中，不再保留require('../src/template/toast.html')这类依赖用户配置的代码。
• 这样后续任何项目（webpack/Vite）引入该库时，都不需要额外配置。

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