如何在Vite生产构建中仅为HTML添加link标签

方法一：直接在index.html中使用环境判断（最简方案） #

Vite默认支持在index.html中使用EJS风格的模板语法，结合内置环境变量就能实现生产环境仅渲染指定代码。

在你的index.html的<head>标签内添加以下代码：

<% if (import.meta.env.PROD) { %>
<link rel="preload" href="<%= import.meta.env.BASE_URL %>assets/inter-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
<% } %>

• import.meta.env.PROD：Vite内置变量，仅在生产构建时为true
• import.meta.env.BASE_URL：自动匹配vite.config.js中配置的base路径，避免资源路径错误

执行npm run build时，这行preload链接会被注入到最终HTML；开发环境（npm run dev）则会忽略这段代码。

方法二：通过Vite插件动态注入（适合复杂场景） #

如果需要更灵活的逻辑（比如动态生成资源路径、根据构建配置调整），可以编写自定义Vite插件处理：

修改vite.config.js（或vite.config.ts）：

import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    {
      name: 'inject-preload-link',
      transformIndexHtml(html) {
        if (process.env.NODE_ENV === 'production') {
          const preloadLink = `<link rel="preload" href="${process.env.BASE_URL || ''}assets/inter-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin="anonymous" />`;
          return html.replace('</head>', `${preloadLink}\n</head>`);
        }
        return html;
      }
    }
  ]
});

该插件会在Vite处理HTML时自动判断环境，仅在生产构建阶段插入指定的preload链接。

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