如何使用 Vite 包含 HTML 部分内容?

doc*_*tus 12 templates rollup rollupjs vite

是否可以使用 Vite(普通)包含共享 HTML 的片段?我正在寻找一种无需通过 JS 注入即可预渲染 HTML 的方法。

就像是:

<html>
  <head>
    { include 'meta-tags' }
  </head>
  <body> 
    { include 'nav' }
    <h1>Hello World</h1>
  <body>
</html>
Run Code Online (Sandbox Code Playgroud)

doc*_*tus 26

vite-plugin-handlebars是我一直在寻找的解决方案。使用此包可以非常轻松地设置部分:

设置:

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

export default {
  plugins: [
    handlebars({
      partialDirectory: resolve(__dirname, 'partials'),
    }),
  ],
};
Run Code Online (Sandbox Code Playgroud)

您要包含部分内容的文件:

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

<h1>The Main Page</h1>
Run Code Online (Sandbox Code Playgroud)

渲染输出:

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

<h1>The Main Page</h1>
Run Code Online (Sandbox Code Playgroud)