Open nailfar opened 1 month ago
@nailfar 通过配置可以自己修改安全策略,分享个demo仓库看看。 https://github.com/tomjs/vite-plugin-vscode?tab=readme-ov-file#webviewoption
@tomgao365
https://github.com/nailfar/vite-plugin-vscode-demo.git
pnpm install 启动debug Extension 进入开发模式 扩展开发宿主会自动打开 Images viewer 打开一个有图片的文件夹 图片无法访问
Preview extension 图片可以访问
@nailfar 你好,我这边修改 客户端和 iframe 的 CSP 都无法加载,估计是 vscode 扩展本身的限制。 我看了一下demo,是否可以把读取的图片直接转换为base64然后再传递到前端呢?
可以把launch.json的命令拆分,单独启动npm run dev 再启动debug。 debug本身速度很快,但是debug时预先要完成npm run dev这个task,有时候很慢。 在launch.json,去除”preLaunchTask“这一行,或者再创建一个备份的命令,单独运行 npm run dev,再debug,可以快速启动
图片无法访问的问题,如果生成的html字符串中的csp限制导致,可以看下有没有可以解除限制。或者自己改下相关代码调试
在 Preview Extension 模式下,webview.asWebviewUri 将本地图片转化为 vscode 可识别的路径,
图片可以正常显示
![image](https://github.com/tomjs/vite-plugin-vscode/assets/12581226/ad1abff3-9558-4152-98c8-cb2916b12b82)
在Debug Extension模式调试,热更新可以正常使用,但是 图片无法正常加载![image](https://github.com/tomjs/vite-plugin-vscode/assets/12581226/7f64cde2-61e9-43cf-b050-0301b8fab04a)
可能是由于dev 模式下 嵌入的iframe 来支持热更新,iframe 内加载webview.asWebviewUri 转化的资源 无法加载;但是没有找到相关的安全策略 以及解决办法,目前采用dev 模式开发写样式,需要图片调试时 开启 Preview模式,但是构建速度很慢流程不是很丝滑,希望提供解决思路,感谢