用户生产环境时，自定义目录，动态引入的文件，不会附加上vscode 的uri，导致无法使用。

tomjs / vite-plugin-vscode

用 vue/react 来开发 vscode extension webview ，支持 esm 和 cjs。Use vue/react to develop vscode extension webview, supporting esm and cjs.

MIT License

29 stars 1 forks source link

我在项目中使用冷了多页的方式去实现。自定义目录后，部分动态引入的文件由于没有在html文件中声明，打包后引入时是绝对路径，导致404. 可以在构建时，设置 base为：'./'（vite.config.ts）。这样动态引入时是相对路径，vscode会附加uri。但是html文件中引入的js、css是相对路径。

需要在插件为这些资源附加 vscode的uri时，替换相对路径（../ ../../等）为绝对路径（/），再拼接vscode的uri。

const attr = element.getAttribute(tag[tag]);
if(attr) {
/** 替换开头的‘./’ '../'等为 ‘/’ */
 let attrWithBaseUri = replaceRelativePathToAbsolutePath(attr);
attrWithBaseUri = `{{baseUri}}${attrWithBaseUri}`;
element.setAttribute(tag[tag], attrWithBaseUri);
}

tomjs / vite-plugin-vscode

用户生产环境时，自定义目录，动态引入的文件，不会附加上vscode 的uri，导致无法使用。 #6