功能介绍
- HTML 压缩能力
- EJS 模版能力
- 多页应用支持
- 支持自定义
entry
- 支持自定义
template
安装
npm i vite-plugin-html -D
使用
-
在
index.html
中增加 EJS 标签,例如:<head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title><%- title %></title> <%- injectScript %> </head>
-
在
vite.config.js
中配置,该方式可以按需引入需要的功能即可import { defineConfig, Plugin } from 'vite' import vue from '@vitejs/plugin-vue' import { createHtmlPlugin } from 'vite-plugin-html' export default defineConfig({ plugins: [ vue(), createHtmlPlugin({ minify: true, //是否压缩 html /** * 在这里写entry后,你将不需要在`index.html`内添加 script 标签,原有标签需要删除 * @default src/main.ts */ entry: 'src/main.ts', /** * 如果你想将 `index.html`存放在指定文件夹,可以修改它,否则不需要配置 * @default index.html */ template: 'public/index.html', /** * 需要注入 index.html ejs 模版的数据 */ inject: { data: { title: 'index', injectScript: `<script src="./inject.js"></script>`, }, }, }), ], })
参考学习链接:https://www.jianshu.com/p/77cceaaa4723