vite给HTML注入变量

安装插件：vite-plugin-html

 

npm install vite-plugin-html -D

在 vite.config.js 中配置

 

# vite.config.js

    ***

    import { defineConfig, loadEnv } from "vite";
    import { createHtmlPlugin } from "vite-plugin-html";


    const getViteEnv = (mode, target) => {
      return loadEnv(mode, process.cwd())[target];
    };

    export default ({ mode }) =>
      defineConfig({
        plugins: [
          vue(),
          createHtmlPlugin({
            inject: {
              data: {
                logo: getViteEnv(mode, "VITE_APP_LOGO"),
                title: getViteEnv(mode, "VITE_APP_TITLE"),
              },
            },
          }),
        ],

    ***

    });

inject > data 里面就是我们的数据

在 index.html 中使用变量

 <link rel="icon" href="<%= logo %>">
    <title><%= title %></title>