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

2023年3月20日更新：

Vite从4.2版本开始支持HTML Env替换！因此，如果这就是您所寻找的一切，那么您应该已经准备好了。

较旧的答案：

想为一个项目做同样的事情。使用了vite-plugin-html一段时间，但我遇到了该插件的问题，并且该插件的作者似乎已停止维护它，因此我不得不寻找替代解决方案。

幸运的是，这很容易，因为 Vite 有一个钩子。

所以我最终写了这个小插件：

const transformHtmlPlugin = data => ({
    name: 'transform-html',
    transformIndexHtml: {
        enforce: 'pre',
        transform(html) {
            return html.replace(
                /<%=\s*(\w+)\s*%>/gi,
                (match, p1) => data[p1] || ''
            );
        }
    }
});

在 Vite 配置中，只需将其添加到插件数组中，并向其传递您想要在 HTML 中替换的内容的键/值对：

plugins: [transformHtmlPlugin({ key: 'value' })]

然后在您的 中index.html，添加像原始问题中一样的标签：<%= key %>，它们将被您传递到插件中的任何内容替换。

如果您想传递所有环境变量，请使用它们loadEnv（示例在v-moe 的帖子中），然后解压对象：transformHtmlPlugin({ ...env })。

这就是我解决问题的方法。也许这对那里的人有用！

Answer 2

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

1. 我安装一个包
2. 我“作弊”并使用 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>

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