vite-plugin-html 是一個用于 Vite 構建工具的插件，它可以幫助你在構建過程中動態注入一些 HTML 內容，比如標題、元數據、環境變量等。通過使用這個插件，你可以根據項目的配置和環境變量自動生成帶有動態內容的 HTML 文件，適用于 SEO、社交分享和其他需要動態設置 HTML 元素的場景。
元數據是什么
元數據（Metadata）是描述數據的數據，通常用于提供關于其他數據的詳細信息。它并不是實際的內容本身，而是幫助解釋、管理和分類這些內容的信息。在 Web 開發中，元數據通常指的是在 HTML 文檔的 部分使用的標簽，來描述網頁內容的性質、提供網頁的附加信息，或者優化搜索引擎等。
常見的元數據標簽
- 標簽：這是最常見的元數據標簽，用于提供關于網頁的描述、關鍵詞、作者等信息。
示例：
<meta name="description" content="這是一個示例網站，用于展示元數據的使用。">
<meta name="author" content="John Doe">
<meta name="keywords" content="HTML, 元數據, 網站">
標簽 ：用來設置網頁的標題，這個標題會在瀏覽器的標簽欄顯示。
示例：
<title>我的網站</title>
- 標簽：常用于引入外部資源，如樣式表（CSS）、圖標等。也可以提供網頁與其他文檔或網站的關系信息。
示例：
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
- 標簽與 Open Graph（OG）協議：用于社交媒體分享時提供更豐富的內容（如 Facebook、Twitter）。
示例：
<meta property="og:title" content="分享標題">
<meta property="og:description" content="分享描述內容">
<meta property="og:image" content="分享圖片鏈接">
- 標簽與 Twitter 卡片（Twitter Cards）：用于在 Twitter 上分享時展示更多的格式化內容。
示例：
<meta name="twitter:title" content="Twitter 標題">
<meta name="twitter:description" content="Twitter 描述內容">
<meta name="twitter:image" content="Twitter 圖片鏈接">
元數據的作用
- 搜索引擎優化（SEO）：通過設置正確的 標簽，可以幫助搜索引擎更好地理解網頁內容，提高網頁的可見性。
- 社交媒體分享：使用 Open Graph 和 Twitter Card 等協議，能讓網頁在社交媒體上分享時呈現更好的視覺效果和豐富的信息。
- 瀏覽器和設備兼容性：元數據可以設置網頁如何在不同設備上顯示（例如，設置視口寬度）。
- 提升用戶體驗：元數據可以讓頁面在用戶訪問時提供更多的描述信息，比如網頁的語言、作者等。
為什么需要 vite-plugin-html？
在使用 Vite 進行項目開發時，很多時候需要根據不同的環境（如開發環境和生產環境）動態調整 HTML 文件中的內容。例如：
- 根據環境變量設置頁面標題、描述或其他 meta 信息；
- 自動注入一些全局的 JavaScript 變量；
- 使用外部腳本或樣式文件鏈接；
- 動態加載一些根據構建環境調整的內容。
1. 安裝 vite-plugin-html
首先，你需要安裝 vite-plugin-html 插件：
npm install vite-plugin-html --save-dev
或者使用 yarn：
yarn add vite-plugin-html --dev
2. 使用 vite-plugin-html
在 vite.config.js 或 vite.config.ts 配置文件中，你可以按如下方式使用插件：
import { defineConfig } from 'vite';
import createHtmlPlugin from 'vite-plugin-html';export default defineConfig({plugins: [createHtmlPlugin({inject: {// 動態注入的內容data: {title: 'My Awesome Project', // 設置頁面標題description: 'This is an awesome project built with Vite.', // 設置頁面描述customVar: process.env.NODE_ENV === 'production' ? 'prod' : 'dev', // 基于環境設置的自定義變量},},}),],
});
3. 插件功能和配置
-
**inject：**用于注入動態內容到 HTML 文件中。你可以將動態數據（如環境變量、標題、描述等）通過 data 對象注入。
-
title: 設置 HTML 頁面
標簽的內容。 -
description: 可以設置頁面的 標簽內容。
-
customVar: 你還可以注入任意的變量，甚至是來自環境變量的數據，進行更復雜的動態注入。
**動態注入內容：**你可以使用 env 變量或者其他配置數據來動態修改 HTML 中的內容。例如，可以通過 process.env 來獲取當前的構建環境，或者根據不同的需求設置不同的元數據。
- 高級用法
使用模板
你還可以將 HTML 文件模板作為輸入，將內容插入到指定的位置。比如，下面的配置演示了如何使用模板文件：
import { defineConfig } from 'vite';
import createHtmlPlugin from 'vite-plugin-html';export default defineConfig({plugins: [createHtmlPlugin({inject: {data: {title: 'Dynamic Title',description: 'Dynamic description from environment variables',},},minify: true, // 可以啟用 HTML 最小化injectData: {customVar: process.env.NODE_ENV === 'production' ? 'production' : 'development',},}),],
});
自定義模板
如果你需要自定義 HTML 模板，可以使用一個指定的模板文件：
import { defineConfig } from 'vite';
import createHtmlPlugin from 'vite-plugin-html';export default defineConfig({plugins: [createHtmlPlugin({inject: {data: {title: 'My Custom Template',description: 'Description of my custom template',},},template: 'src/index.template.html', // 指定自定義模板路徑}),],
});
4 示例：基于環境變量注入
你可以使用環境變量來控制 HTML 中的內容，比如：
plugins: [createHtmlPlugin({inject: {data: {title: env.DOMAIN_NAME, // 基于環境的動態頁面標題imageMeta: `https://www.${env.DOMAIN_NAME}.com/img/${env.DOMAIN_NAME}/img/ic_launcher.webp`, // 動態圖片 URLlocaleMeta: env.CURRENT_LANGUAGE, // 當前網站的語言titleMeta: env.DOMAIN_NAME + ' ' + ruleMap[env.RULE_TYPE].meta.title, // 自定義標題，基于規則descriptionMeta: ruleMap[env.RULE_TYPE].meta.description, // 來自 ruleMap 的描述},},}),],<title><%- title %></title><meta property="og:type" content="website"><meta property="og:image" content="<%- imageMeta %>"><meta property="og:locale" content="<%- localeMeta %>"><meta property="og:title" content="<%- titleMeta %>"><meta property="og:description" content="<%- descriptionMeta %>">
5 總結
vite-plugin-html 是一個非常有用的插件，能夠讓你在 Vite 構建時動態注入 HTML 內容，適用于 SEO 優化、社交分享和根據不同環境（如開發、生產環境）調整頁面內容等場景。通過這種方式，你可以確保頁面在不同環境下有正確的元數據，提升網站的可見性和用戶體驗。
