关于vscode-resource和vscode-webview-resource

vscode-webview-resource：

https://github.com/microsoft/vscode/pull/97777

比较新的vscode版本已经不支持vscode-resource头了，或者这样说就算代码里还是使用的vscode-resource形式，

新版的vscode在运行时会将vscode-resource头替换为vscode-webview-resource头；

其自动替换逻辑如下:

如果原来vscode-resource:后面的路径是归一化的，这样没什么问题；

如果原来的vscode-resource后面的路径不是归一化的，包含../这样的结构，上面这个自动处理过后,会出现找不到资源的问题；

方案一:

private static buildPath(data: string, webview: vscode.Webview, contextPath: string): string {
    return data.replace(/((src|href)=("|'))(.+?\.(css|js))\b/gi, "$1" + vscode.Uri.file(`${contextPath}/`).with({ scheme: 'vscode-resource' }).toString() + "/$4");
}

=》

data.replace(/((src|href)=("|'))(.+?\.(css|js))\b/gi,function(m0,m1,m2,m3,m4,m5){
return m1+vscode.Uri.file(path.join(contextPath, m4)).with({ scheme: 'vscode-resource' }).toString()
});

方案二:

参考:

https://github.com/microsoft/vscode-extension-samples/blob/master/webview-sample/src/extension.ts