vite无法处理xxx.html文件

Question

我有一个 Vue2 的 Vite 项目，它包含一个静态 html 文件。

\n

喜欢关注

\n

import template from 'editor.html';\nexport default {\n    template: template\n}\n

\n

当我运行时yarn dev，终端输出：

\n

\n

node_modules/@gaoding/editor-framework/lib/base/editor.js:23:21：错误：没有为“.html”文件配置加载器：node_modules/@gaoding/editor-framework/lib/base/editor.html \n23 \xe2\x94\x82 从 './editor.html' 导入模板；

\n

\n

我尝试在下面添加一些插件vite.config.ts，但所有这些都不起作用。

\n

\n

@rollup/插件-html

\n

\n

\n

rollup-插件-html

\n

\n

\n

rollup-插件-htmlvue

\n

\n

我怎么解决这个问题。

\n

Answer 1

?raw在导入末尾添加可以解决该问题：

import template from "./contact-list.html?raw";  

我仍在寻找如何为所有 HTML 文件全局设置它的解决方案。

Answer 2

我知道这已经很旧了，但是我发现了一些对我有用的东西。

// vite.config.js
const htmlImport = {
  name: "htmlImport",
  /**
   * Checks to ensure that a html file is being imported.
   * If it is then it alters the code being passed as being a string being exported by default.
   * @param {string} code The file as a string.
   * @param {string} id The absolute path. 
   * @returns {{code: string}}
   */
  transform(code, id) {
    if (/^.*\.html$/g.test(id)) {
      code = `export default \`${code}\``
    }
    return { code }
  }
}

export default {
  plugins: [ htmlImport ]
}

上面的代码允许我将 html 文件作为字符串导入，而不需要 ?raw。我需要这个来将 AngularJS 1.5 从 gulp 迁移到 Vite，它运行得很好。

您可以在这里找到参考点