vite index.html 中的字符串替换

Question

我正在尝试将一些字符串注入到 Vite 应用程序的 index.html 中（使用 vue3 模板）。例如，在 vue-cli 项目中，我们会有

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

Vite 的方法是什么？（我知道 BASE_URL 在这种情况下只是'/'。我要求的是通用解决方案）我可以使用仅涵盖环境变量的解决方案，但是知道更通用的解决方案会很棒可以使用 JS 代码的解决方案

<title><%= htmlWebpackPlugin.options.title %></title>

而且我非常感谢不需要安装 npm 包的解决方案

Answer 1

不得不大大降低我的期望：

我安装了一个包
我“作弊”并使用process.env

// vite.config.js
import vue from '@vitejs/plugin-vue'

import { loadEnv } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    plugins: [
      vue(),
      createHtmlPlugin({
        minify: true,
        inject: {
          data: {
            title: env.VITE_MY_FOO,
          }
        }
      }),
    ],
  }
}

然后在.env

VITE_MY_FOO="Hello vite ejs"

并在 index.html

<title><%= title %></title>

不能说我喜欢它，但它确实有效

vite index.html 中的字符串替换

String replacements in index.html in vite

javascript

vuejs3

rollupjs

vite