自定义HTML模板
项目配置与基础使用 自定义HTML模板
Vite.js允许开发者自定义HTML模板，这在需要修改默认HTML结构或注入特定内容时非常有用。默认情况下，Vite使用内置的HTML模板，但通过简单配置就能覆盖它。
基本配置方法
在项目根目录创建index.html文件会自动成为应用的入口模板。Vite会处理这个文件并自动注入必要的脚本标签。一个最基本的自定义HTML模板如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的Vite应用</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
模板变量与插值
Vite的HTML模板支持特殊的%ENV_VAR%语法来插入环境变量：
<title>%VITE_APP_TITLE%</title>
在vite.config.js中可以通过define选项定义这些变量：
export default defineConfig({
define: {
'import.meta.env.VITE_APP_TITLE': JSON.stringify('我的应用')
}
})
多页面应用配置
对于多页面应用，需要在vite.config.js中配置多个入口：
import { resolve } from 'path'
export default defineConfig({
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
about: resolve(__dirname, 'about.html'),
contact: resolve(__dirname, 'contact.html')
}
}
}
})
每个HTML文件对应一个独立的页面入口。
动态模板生成
对于更复杂的场景，可以使用transformIndexHtml钩子动态修改HTML：
export default defineConfig({
plugins: [
{
name: 'html-transform',
transformIndexHtml(html) {
return html.replace(
/<title>(.*?)<\/title>/,
`<title>替换后的标题</title>`
)
}
}
]
})
模板中的资源引用
在HTML中引用资源时，Vite会自动处理路径：
<!-- 引用public目录下的图片 -->
<img src="/logo.png" alt="Logo">
<!-- 引用src/assets目录下的图片 -->
<img src="@/assets/icon.png" alt="Icon">
条件性内容注入
根据环境变量注入不同内容：
<% if (import.meta.env.MODE === 'development') { %>
<script src="https://cdn.example.com/dev-tools.js"></script>
<% } %>
自定义模板位置
如果HTML模板不在项目根目录，可以在配置中指定：
export default defineConfig({
root: 'src',
publicDir: '../public',
build: {
outDir: '../dist'
}
})
模板中的CSS处理
Vite会自动处理HTML中引入的CSS文件：
<!-- 开发环境下会注入HMR客户端 -->
<link rel="stylesheet" href="/src/styles/main.css">
服务端渲染(SSR)配置
对于SSR应用，HTML模板需要特殊处理：
export default defineConfig({
ssr: {
noExternal: true
}
})
国际化支持
在HTML模板中添加多语言支持：
<html lang="%VITE_APP_LANG%">
然后在配置中定义默认语言：
export default defineConfig({
define: {
'import.meta.env.VITE_APP_LANG': JSON.stringify('zh-CN')
}
})
性能优化相关配置
通过HTML模板添加预加载提示：
<!-- 预加载关键资源 -->
<link rel="modulepreload" href="/src/main.js">
安全相关配置
添加CSP meta标签：
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
移动端适配
添加移动端特有的meta标签：
<meta name="theme-color" content="#ffffff">
<meta name="apple-mobile-web-app-capable" content="yes">
PWA支持
为PWA添加manifest链接：
<link rel="manifest" href="/manifest.json">
自定义favicon
配置多尺寸的favicon：
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
模板验证
添加HTML验证相关的meta标签：
<meta name="generator" content="Vite">
社交媒体分享优化
添加Open Graph协议标签：
<meta property="og:title" content="%VITE_APP_TITLE%">
<meta property="og:type" content="website">
模板片段复用
通过JavaScript动态插入重复的HTML片段：
// 在构建时插入导航栏
const navHTML = await fs.readFile('src/partials/nav.html', 'utf-8')
export default defineConfig({
plugins: [
{
transformIndexHtml: {
transform(html) {
return html.replace('<!-- nav-placeholder -->', navHTML)
}
}
}
]
})
构建时变量替换
使用@rollup/plugin-replace进行更复杂的变量替换：
import replace from '@rollup/plugin-replace'
export default defineConfig({
plugins: [
replace({
__BUILD_DATE__: new Date().toISOString(),
preventAssignment: true
})
]
})
然后在HTML中使用：
<footer>构建时间: __BUILD_DATE__</footer>
模板缓存控制
为静态资源添加版本号防止缓存：
<script src="/main.js?v=%VITE_APP_VERSION%"></script>
错误页面定制
创建自定义404页面：
<!-- 404.html -->
<!DOCTYPE html>
<html>
<head>
<title>页面未找到</title>
</head>
<body>
<h1>404 - 页面不存在</h1>
</body>
</html>
模板压缩配置
配置HTML压缩选项：
export default defineConfig({
build: {
minify: 'terser',
terserOptions: {
compress: {
drop_console: true
}
}
}
})
环境特定内容
根据环境注入不同内容：
<% if (import.meta.env.PROD) { %>
<script src="https://cdn.example.com/analytics.js"></script>
<% } %>
模板中的SVG处理
直接在HTML中使用SVG：
<div>
${require('@/assets/logo.svg')}
</div>
模板中的Web组件
支持在HTML中直接使用Web组件：
<my-component></my-component>
模板调试技巧
添加开发专用的调试工具：
<% if (import.meta.env.DEV) { %>
<script>
console.log('当前环境：开发模式')
</script>
<% } %>
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
上一篇：构建目标与多页面应用配置
下一篇：全局变量注入方式
