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>