求助：Vite构建时自动转义index.html的src标签变量如何解决

问题说明 #

我想让Vite构建后生成的index.html里，script标签的src保留/{{ variable }}/assets/index.js这种未转义的模板变量，但实际构建后，{{ variable }}被自动URL编码成了%7B%7B%20variable%20%7D%7D，最终代码变成：

<!DOCTYPE html>
<html lang="en">
  <head>
     <script type="module" src="/%7B%7B%20variable%20%7D%7D/assets/index.js"></script>
  </head>
  <body>
  </body>
</html>

之前尝试在Vite配置里设置base: "/{{ variable }}"，但这个方法没用，base里的变量同样会被转义。

可行解决方案 #

方案1：用transformIndexHtml钩子替换转义内容 #

直接在Vite配置里加一个自定义插件，利用transformIndexHtml钩子把编码后的字符串替换回原模板变量：

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      name: 'preserve-template-vars',
      transformIndexHtml(html) {
        // 将URL编码后的{{ variable }}替换回原内容
        return html.replace(/%7B%7B%20variable%20%7D%7D/g, '{{ variable }}')
      }
    }
  ]
})

方案2：用占位符避免Vite自动转义 #

先在index.html里用一个不会被Vite识别的占位符代替{{ variable }}，比如__TEMPLATE_VAR__：

<script type="module" src="/__TEMPLATE_VAR__/assets/index.js"></script>

然后在Vite配置里通过钩子替换成目标变量：

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      name: 'inject-template-vars',
      transformIndexHtml(html) {
        return html.replace(/__TEMPLATE_VAR__/g, '{{ variable }}')
      }
    }
  ]
})

这个方法更灵活，能避免Vite对模板语法的误处理。

为什么base配置无效？ #

Vite的base选项是用来设置资源的基础路径，它会对配置的路径值做URL编码处理，所以即使把base设为"/{{ variable }}"，最终也会被转义成"/%7B%7B%20variable%20%7D%7D"，没法保留原变量。

内容的提问来源于stack exchange，提问作者yory100