基于Vuetify 3的VS Code扩展无法关联woff2字体文件

问题核心是Vite构建生成的CSS里，MDI字体用了绝对路径（/开头），但VS Code Webview的资源加载规则不支持这种绝对路径，导致字体找不到，图标显示成方框。

三种解决办法 #

1. 修改Vite配置生成相对路径 #

直接在项目根目录的vite.config.js里设置base为相对路径，重新构建后所有资源路径都会适配dist的文件结构：

// vite.config.js
import { defineConfig } from 'vite'
import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
  base: './', // 关键：把资源基准路径设为相对路径
  plugins: [vuetify()],
  // 其他原有配置保留
})

执行vite build重新构建，此时CSS里的字体路径会变成./assets/materialdesignicons-webfont-Dp5v-WZN.woff2?v=7.4.47，和dist/assets里的文件对应上。

2. 手动修改CSS文件的字体路径 #

如果不想重新构建，直接找到dist/assets下的CSS文件，把@font-face里的绝对路径改成相对路径：
把

url(/materialdesignicons-webfont-Dp5v-WZN.woff2?v=7.4.47)

改成

url(./materialdesignicons-webfont-Dp5v-WZN.woff2?v=7.4.47)

确保路径指向dist/assets目录下的字体文件。

3. 在VS Code扩展中正确映射资源URI #

在扩展的代码里，把本地dist/assets的文件转换成Webview能识别的URI，确保所有资源（包括字体）都能被正确加载：

// extension.ts
import * as vscode from 'vscode';
import * as path from 'path';

export function activate(context: vscode.ExtensionContext) {
  const panel = vscode.window.createWebviewPanel(
    'yourWebviewId',
    'Webview标题',
    vscode.ViewColumn.One,
    {
      enableScripts: true,
      // 配置本地资源根目录
      localResourceRoots: [
        vscode.Uri.file(path.join(context.extensionPath, 'dist', 'assets'))
      ]
    }
  );

  // 工具函数：把本地文件路径转成Webview URI
  const getWebviewUri = (filePath: string) => {
    const fileUri = vscode.Uri.file(path.join(context.extensionPath, 'dist', 'assets', filePath));
    return panel.webview.asWebviewUri(fileUri);
  };

  // 渲染HTML时，用转换后的URI加载资源
  const htmlContent = `
    <!DOCTYPE html>
    <html>
      <head>
        <link rel="stylesheet" href="${getWebviewUri('app.xxxx.css')}">
      </head>
      <body>
        <script src="${getWebviewUri('app.xxxx.js')}"></script>
      </body>
    </html>
  `;

  panel.webview.html = htmlContent;
}

这种方式下，只要CSS里的字体路径是相对路径，Webview就能自动解析到正确的字体文件。

内容的提问来源于stack exchange，提问作者Phalaksha C G