vscode webview集成vue应用踩过的坑

前言

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

期望

通过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读取了一个文件，也不会给打出去。