search

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
27 stars 1 forks source link

Debug Extension 调试模式 无法加载项目文件夹中的图片资源 #9

Open nailfar opened 1 month ago

nailfar commented 1 month ago

在 Preview Extension 模式下，webview.asWebviewUri 将本地图片转化为 vscode 可识别的路径， 图片可以正常显示 image

在Debug Extension模式调试，热更新可以正常使用，但是 图片无法正常加载 image

可能是由于dev 模式下 嵌入的iframe 来支持热更新，iframe 内加载webview.asWebviewUri 转化的资源 无法加载；但是没有找到相关的安全策略 以及解决办法，目前采用dev 模式开发写样式，需要图片调试时 开启 Preview模式，但是构建速度很慢流程不是很丝滑，希望提供解决思路，感谢

tomgao365 commented 1 month ago

@nailfar 通过配置可以自己修改安全策略，分享个demo仓库看看。 https://github.com/tomjs/vite-plugin-vscode?tab=readme-ov-file#webviewoption

nailfar commented 1 month ago

@tomgao365

https://github.com/nailfar/vite-plugin-vscode-demo.git

pnpm install 启动debug Extension 进入开发模式 扩展开发宿主会自动打开 Images viewer 打开一个有图片的文件夹 图片无法访问

Preview extension 图片可以访问

tomgao365 commented 1 month ago

@nailfar 你好，我这边修改 客户端和 iframe 的 CSP 都无法加载，估计是 vscode 扩展本身的限制。 我看了一下demo，是否可以把读取的图片直接转换为base64然后再传递到前端呢？

programmermark commented 4 weeks ago

可以把launch.json的命令拆分，单独启动npm run dev 再启动debug。 debug本身速度很快，但是debug时预先要完成npm run dev这个task，有时候很慢。 在launch.json，去除”preLaunchTask“这一行，或者再创建一个备份的命令，单独运行 npm run dev，再debug，可以快速启动

programmermark commented 4 weeks ago

图片无法访问的问题，如果生成的html字符串中的csp限制导致，可以看下有没有可以解除限制。或者自己改下相关代码调试