插件

vite-plugin-html

安装

// yarn
yarn add vite-plugin-html -D

// npm
npm i vite-plugin-html -D

配置

// index.html 模板文件
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <link rel="icon" href="/public/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>页面标题</title>
    <%- injectConfig %>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

// vite.config.js
import { defineConfig } from 'vite';
import { createHtmlPlugin } from 'vite-plugin-html';
import vue from '@vitejs/plugin-vue';

const isProduction = process.env.NODE_ENV === 'production';
export default defineConfig({
  base: isProduction ? './' : '',
  plugins: [
    vue(),
    createHtmlPlugin({
      minify: true,
      inject: {
        data: {
          injectConfig: isProduction ? '<script src="./config.js"></script>' : '',
        },
      },
    }),
  ],
});

插件其他功能可参照文档

github.com/vbenjs/vite…

如何在vite项目中index.html文件使用EJS

插件

安装

配置

插件其他功能可参照文档