前言

折腾了两天总算解决了,特此记录下问题及解决方法。希望可以帮到同样问题的你,接下来进入正题。

期望

通过vscode的webview浏览vue应用

问题

一、vscode的webview浏览vue应用时不显示(白板:如果你没有应用到样式的话)

出现该问题的主要有两个原因导致:

1、vue使用vue-router的history模式打包,生成后的dist需依赖服务才能访问(一般生产环境采用这种方式)

解决方案:变更vue-router的mode为hash模式,打包时vue.config.js中的publicpath设置为"./"。

完成上述两项配置,访问dist目录中的index.html时,就可以看到vue应用的内容了

2、vscode读取vue项目的index.html内容时,由于无法识别根目录导致资源加载失败

由于通过vscode-resource协议访问资源,无法定位到网站的根目录,通过在vue项目中index.html模板中添加<base href="/">可使用资源识别根目录。这里需要注意index.html添加<base>后,会影响直接在浏览器中访问dist/index.html无法正常显示。

这时我们将打包好的dist目录拷贝到vscode工程中,在完成下图中的配置就可以访问到我们的vue项目了

二、vscode的webview浏览vue应用时,vscode控制台提示401无权限访问

出现这种情况大概率是因为访问的资源位置不正确导致的。

官方给出的解释:

由于webview读取本地资源是通过vscode-resource协议,vscode-resource只能访问下列地址的资源:

  • 你的插件安装的目录
  • 用户当前激活的工作区

所以当启动调试程序时,在打开的窗口中不要使工作区有项目,以免读取工作区内容。

避免上述问题后,如果还是出现401访问不到资源,检查代码在引用资源时是否是通过panel.webview.asWebviewUri转换的资源地址。

三、开发过程功能正常,打包后各种异常

一通折腾后最终发现,问题全部来源于打包后的vsix未打包出所需的所有资源。(打包后各种问题一个错都不报,就是不正常执行。差评)

如上图所示,与单页面应用一样,所有静态资源需要放置于dist目录下

不论是package.json中所需的图标文件,还是extension.ts中引用的文件,都需要从dist目录中读取。

vscode打包时只单纯打包文件内部import的资源+dist目录资源,即使代码逻辑中fs读取了一个文件,也不会给打出去。

 

Logo

前往低代码交流专区

更多推荐