首页vite-plugin-html使用

vite-plugin-html使用

时间: 2023-09-09 10:10:32 浏览: 184

vite-plugin-html 是一个 Vite 插件，用于生成 HTML 文件。它可以将指定的 HTML 模板文件作为基础，插入打包后的 JS 和 CSS 文件，并且可以在构建过程中根据环境变量进行动态替换。使用步骤如下： 1. 安装插件：`npm install vite-plugin-html -D` 2. 在 `vite.config.js` 中配置插件： ``` import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import html from 'vite-plugin-html' export default defineConfig({ plugins: [ vue(), html({ template: 'public/index.html' // 指定 HTML 模板文件路径 }) ] }) ``` 3. 在模板文件中使用插值表达式或者条件语句： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><%= title %></title> <% if (process.env.NODE_ENV === 'production') { %> <script src="/path/to/production/js"></script> <% } else { %> <script src="/path/to/development/js"></script> <% } %> </head> <body> <div id="app"></div> </body> </html> ``` 插件会将模板文件中的插值表达式和条件语句替换成真实的值和代码，最终生成打包后的 HTML 文件。在上述例子中，`<%= title %>` 会被替换成配置文件中指定的标题，`<% if (process.env.NODE_ENV === 'production') { %>` 则会根据环境变量进行动态替换，生成不同的 HTML 文件。

阅读全文