如何使用 Vite 包含 HTML 个部分？

Question

是否可以使用 Vite（原版）包含共享 HTML 的片段？我正在寻找一种无需通过 JS 注入即可预呈现 HTML 的方法。

类似于：

<html>
  <head>
    { include 'meta-tags' }
  </head>
  <body> 
    { include 'nav' }
    <h1>Hello World</h1>
  <body>
</html>

Answer 1

您可以在 index.html 中使用 vite-plugin-html that enables EJS templates:

// vite.config.js
import { defineConfig } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'

export default defineConfig({
  plugins: [
    createHtmlPlugin({
      entry: 'main.js',

      /**
       * Data that needs to be injected into the index.html ejs template
       */
      inject: {
        data: {
          metaTags: `<meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />`,
          nav: `<nav>
            <a href="https://google.com">Google</a> | 
            <a href="https://apple.com">Apple</a>
          </nav>`,
        },
      },
    }),
  ],
})

<!-- index.html -->
<html>
  <head>
    <%- metaTags %>
  </head>
  <body>
    <%- nav %>
    <h1>Hello World</h1>
  <body>
</html>

demo

Answer 2

vite-plugin-handlebars 是我一直在寻找的解决方案。使用此软件包设置部分非常容易：

设置：

// vite.config.js
import { resolve } from 'path';
import handlebars from 'vite-plugin-handlebars';

export default {
  plugins: [
    handlebars({
      partialDirectory: resolve(__dirname, 'partials'),
    }),
  ],
};

要包含部分内容的文件：

<!-- index.html -->
{{> header }}

<h1>The Main Page</h1>

渲染输出：

<header><a href="/">My Website</a></header>

<h1>The Main Page</h1>

如何使用 Vite 包含 HTML 个部分？

How to include HTML partials using Vite?

templates

rollup

rollupjs

vite