invite 中 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

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

1. 我安裝一個包
2. 我“作弊”並使用 process.env

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

import { loadEnv } from 'vite'
import { minifyHtml, injectHtml } from 'vite-plugin-html'

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    plugins: [
      vue(),
      minifyHtml(),
      injectHtml({
        injectData: {
          title: env.VITE_MY_FOO,
        },
      }),
    ],
  }
}

然后在 .env

VITE_MY_FOO="Hello vite ejs"

並在 index.html

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

不能說我喜歡它，但它有效