如何让Vite中index.html的指定script标签绝对路径保持不变

Vite会自动转换index.html里的绝对路径以适配base配置，但要让特定脚本保持根路径不被修改，有几种实用方案：

方法1：使用带协议的路径前缀 #

直接给src加上协议前缀（如//协议相对路径、http://或https://），Vite不会转换这类路径：

<!-- 协议相对路径，自动适配当前页面协议 -->
<script type="text/javascript" src="//config.js"></script>

<!-- 明确指定协议 -->
<script type="text/javascript" src="http://your-domain.com/config.js"></script>

方法2：自定义属性+Vite钩子处理 #

在vite.config.js中通过transformIndexHtml钩子，识别带自定义属性的脚本并跳过路径转换：

// vite.config.js
export default {
  base: '/demo/',
  plugins: [
    {
      name: 'ignore-specific-scripts',
      transformIndexHtml(html) {
        // 匹配带data-vite-ignore属性的script标签，保留原根路径
        return html.replace(/<script data-vite-ignore src="\/(.*?)">/g, '<script src="/$1">');
      }
    }
  ]
}

对应的index.html写法：

<script data-vite-ignore type="text/javascript" src="/config.js"></script>

方法3：实现你设想的注释标记规则 #

通过transformIndexHtml钩子识别<!-- @vite-ignore -->注释，跳过后续脚本的路径转换：

// vite.config.js
export default {
  base: '/demo/',
  plugins: [
    {
      name: 'ignore-script-via-comment',
      transformIndexHtml(html) {
        // 匹配注释标记后的script标签，保留原根路径
        return html.replace(/<!-- @vite-ignore -->\s*<script src="\/(.*?)">/g, '<script src="/$1">');
      }
    }
  ]
}

即可用你想要的写法：

<!-- @vite-ignore -->
<script type="text/javascript" src="/config.js"></script>

如果只是单个脚本需要保留根路径，方法1最简便；如果需要批量处理或自定义规则，方法2、3更灵活。

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