VSCode扩展Webview中多文件TS Web组件的资源加载问题求助

1. 修复Web组件中CSS加载被拦截的问题 #

你当前的核心错误是传递给Web组件的是本地文件系统路径（fsPath），VSCode Webview出于安全策略，只允许访问通过webview.asWebviewUri()生成的专用资源URI，直接使用本地路径会触发"访问被拒绝"。

修改步骤： #

• 在面板代码中，将传递给<pim-post>的cssUri属性值从cssUri.fsPath改为cssUri.toString()（直接使用Uri对象也会自动转字符串）：

// 原代码
<pim-post date="2023-12-01" cssUri="${cssUri.fsPath}"></pim-post>

// 修改后
<pim-post date="2023-12-01" cssUri="${cssUri}"></pim-post>

• Web组件的generateStyles方法无需修改，因为现在接收的是Webview允许访问的合法URI，<link>标签可以正常加载CSS。

2. 分离HTML模板并通过fetch加载的实现 #

要加载分离的HTML文件，同样需要遵循Webview的资源访问规则，步骤如下：

步骤1：准备分离的HTML文件 #

创建wc-pim-post.html文件，内容为原generateHtml中的模板：

<div class="pim-post__main-container">
  <div class="pim-post__text-container">
    <div class="pim-post__text-date" id="pim-post-date"></div>
    <textarea class="pim-post__text-message" id="pim-post-message"></textarea>        
  </div>
  <div class="pim-post__buttons-container">
    <button class="pim-post__buttons pim-post__buttons--first" id="pim-post-btn-delete">X</button>
    <button class="pim-post__buttons pim-post__buttons--last" id="pim-post-btn-edit">-</button>
  </div>
</div>

步骤2：在面板代码中生成HTML文件的Webview URI #

在_getHtmlForWebview方法中添加HTML文件的URI生成，并传递给Web组件：

private _getHtmlForWebview(webview: vscode.Webview) {
  const webComponentPimPostUri = UtilityService.getWebviewUri(
    webview,
    this._extensionUri,
    ["out", "web-components", "pim-post", "wc-pim-post.js"]
  );
  const cssUri = UtilityService.getWebviewUri(webview, this._extensionUri, [
    "src",
    "web-components",
    "pim-post",
    "wc-pim-post.css",
  ]);
  // 添加HTML文件的URI生成
  const htmlTemplateUri = UtilityService.getWebviewUri(webview, this._extensionUri, [
    "src",
    "web-components",
    "pim-post",
    "wc-pim-post.html",
  ]);
  const nonce = UtilityService.getNonce();

  return /*html*/ `<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />      
    <title>Cat Colors</title>
  </head>
  <body>
    <!-- 添加htmlUri属性传递模板地址 -->
    <pim-post date="2023-12-01" cssUri="${cssUri}" htmlUri="${htmlTemplateUri}"></pim-post>
    <script src="${webComponentPimPostUri}"></script>     
  </body>
</html>`;
}

步骤3：修改Web组件实现fetch加载HTML #

由于fetch是异步操作，建议在connectedCallback钩子中执行（而非constructor，此时组件已挂载到DOM）：

class PimPost extends HTMLElement {
  root: ShadowRoot;
  cssUri: string | null;
  htmlUri: string | null;
  date: string = "";

  constructor() {
    super();
    this.root = this.attachShadow({ mode: "open" });
    this.cssUri = this.getAttribute("cssUri");
    this.htmlUri = this.getAttribute("htmlUri");
  }

  // 组件挂载到DOM后执行异步操作
  async connectedCallback() {
    // 加载CSS
    this.loadStyles();
    // 加载HTML模板
    await this.loadHtmlTemplate();
    // 更新日期
    this.updateDate(this.date);
  }

  static get observedAttributes() {
    return ["date"];
  }

  attributeChangedCallback(attName: string, oldValue: any, newValue: any) {
    switch (attName) {
      case "date":
        if (newValue) {
          this.date = newValue;
          this.updateDate(newValue);
        }
        break;
      default:
        console.error("Unknown attribute");
        break;
    }
  }

  // 加载CSS
  loadStyles() {
    if (!this.cssUri) return;
    const styleLink = document.createElement("link");
    styleLink.rel = "stylesheet";
    styleLink.href = this.cssUri;
    this.root.appendChild(styleLink);
  }

  // 异步加载HTML模板
  async loadHtmlTemplate() {
    if (!this.htmlUri) return;
    try {
      const response = await fetch(this.htmlUri);
      const htmlContent = await response.text();
      const temp = document.createElement("template");
      temp.innerHTML = htmlContent;
      this.root.appendChild(temp.content.cloneNode(true));
    } catch (error) {
      console.error("Failed to load HTML template:", error);
    }
  }

  updateDate(newValue: string) {
    const dateElement = this.root.querySelector("#pim-post-date");
    if (dateElement) dateElement.innerHTML = newValue;
  }
}
window.customElements.define("pim-post", PimPost);

关键注意点： #

• 所有本地资源（CSS、HTML、JS）都必须通过webview.asWebviewUri()生成合法的Webview URI，禁止直接使用本地文件路径。
• 异步操作（如fetch）务必放在connectedCallback中执行，避免在constructor中操作尚未挂载的DOM。

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