VS Code扩展开发中如何为webview导入本地jQuery文件？

解决方案 #

1. 修正Webview资源URI生成逻辑 #

不要手动修改scheme为vscode-resource，VS Code最新版本要求必须调用webview.asWebviewUri()方法生成可在webview中访问的资源地址，代码修正为：

const jqueryPathOnDisk = vscode.Uri.joinPath(this._extensionUri, 'media', 'jquery-3.6.0.min.js');
const jqueryUri = webview.asWebviewUri(jqueryPathOnDisk);

2. 正确配置CSP规则，不要删除CSP配置 #

CSP是webview的安全限制策略，直接删除会触发VS Code默认安全拦截，反而无法加载脚本。如果用本地文件引入，原有CSP的script-src 'nonce-${nonce}'规则已经满足需求；如果要使用CDN引入，需要把CDN域名加到CSP的script-src规则中，示例如下：

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}' https://code.jquery.com;">

3. 调整脚本加载顺序 #

确保jQuery的script标签放在所有依赖jQuery的业务脚本（比如示例中的main.js）之前加载，否则业务代码执行时jQuery还未完成初始化，自然获取不到window.jQuery对象。

4. 校验资源路径合法性 #

确认扩展目录下media文件夹中确实存在jquery-3.6.0.min.js文件，文件名大小写要和代码中引用的完全一致，VS Code对资源路径大小写敏感。

5. 调试排查 #

如果以上步骤操作后仍不生效，可以打开webview开发者工具（命令面板搜索「Webview Developer Tools」，选中对应扩展的webview进程），查看Console面板是否有404报错、CSP拦截报错，Sources面板是否能找到加载的jQuery文件即可定位问题。

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