vite 中 index.html 中的字符串替换

Answer 1

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

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>

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

Answer 2

想为一个项目做同样的事情。使用了

vite-plugin-html

了一点，但我遇到了插件的问题，插件的作者似乎已经停止维护它，所以我不得不寻找替代解决方案。

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

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

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 })

.

这就是我解决问题的方式。也许它对外面的人有用！