vite 无法处理 xxx.html 文件

Question

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

喜欢下面的

import template from 'editor.html';
export default {
    template: template
}

当我运行

yarn dev

时，终端输出：

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

我尝试在

vite.config.ts

中添加一些插件，但所有这些都不起作用。

@rollup/plugin-html

rollup-plugin-html

rollup-插件-htmlvue

我该如何解决这个问题。

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，它运行得相当好。

您可以在这里找到参考点

Answer 3

虽然在导入末尾添加

?raw

确实可以解决@Marcin Wosinek提到的问题，但当我们想要通过执行推送时，它不会缩小html

npm run build

Leon Eck 在这个存储库中找到的解决方案是使用插件html-minifier

。

npm install --save-dev html-minifier 这是更新后

vite.config/ts

的样子：

import { defineConfig } from 'vite';
import { minify } from 'html-minifier';

export default defineConfig({
  plugins: [
    htmlMinify(),
  ],
});

const htmlComponentFile = /\.html\?inline$/; // can have a prefix to html file names such as /\.component\.html\?inline$/

const minifyHTMLConfig = {
  collapseInlineTagWhitespace: true,
  collapseWhitespace: true,
  minifyCSS: true,
  minifyJS: true,
  removeAttributeQuotes: true,
  removeComments: true,
  removeEmptyAttributes: true,
  removeOptionalTags: true,
  removeRedundantAttributes: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  sortAttributes: true,
  sortClassName: true,
};

function htmlMinify() {
  return {
    name: 'html-minify',

    transform(src: string, id: string) {
      if (htmlComponentFile.test(id)) {
        return {
          code: `export default \`${minify(src, minifyHTMLConfig)}\``,
          map: null,
        };
      } else {
        return;
      }
    },
  };
}

最后，以下是身份验证组件的外观：

src
   component
      auth
         auth.html
         auth.css
         auth.js
vite.config.ts
// other files

<div class="auth">
    <div class="auth-form">
    </div>  
</div>

.auth {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: stretch;
  min-height: 99.99vh;  
  width: auto;
  background-color: var(--primary-color);
}
.auth-form {
  align-self: center;
  flex-grow: 1;
  background-color: var(--primary-color);
  color: var(--text-color);
  padding: 5vh 8vw;
}

import html from './auth.html?inline';
import styles from './auth.css?inline';

function renderTemplate() {
  const template = document.createElement("template");

  template.innerHTML = `
    <style>
      ${styles}
    </style>
    ${html}
    `;
  return template;
}

export class Auth extends HTMLElement {
  constructor() {
      super();
      const template = renderTemplate();
      this.innerHTML = template.innerHTML;
  }

  connectedCallback() {
    console.log("connected!");
  }

  disconnectedCallback() {
    console.log("disconnected!");
  }
}

当我们执行

npm run build

时，以上所有内容都会自动缩小。