记一次Vue.js开发VSCode插件所遇的问题

前段时间，公司学习小组起建了一个项目：开发VSCode的插件。
前期研究方案发现VSCode是基于Electron开发的，所以首要研究的技术是Electron和VSCode Extension的相关API。本人之前没有任何使用VSCode的经验，前端开发目前更多接触Vue.js。基于学习交流的前提下，小组成员一致同意使用Electron+Vue.js的方案，学习目标也定在这两个前端框架上。（至于这两个框架是什么，大家可以自行Google）

技术思路

经研究发现，VSCode-Extension-API已经足够开发本次项目的需求，无需接入Electron API，项目的主要UI实现都是基于Vue.js（由于目前的项目是二次开发，可以使用许多原有的js文件，使用Electron重写不太显现实，所以考虑用Vue来写部分页面，然后接入其他部分已有的文件），当然你也可以考虑只是使用Electron去开发。
本项目中创建了两个工程，一个是VSCode插件工程，另一个是Vue项目工程，其中Vue工程嵌入在VSCode插件工程中，然后使用VSCode的webview加载Vue构建的js文件。

• 创建一个VSCode插件工程
• 创建Vue的web工程

踩坑一：VSCode Webview无法加载相对路径文件

VSCode Webview只支持加载遵循vscode-resource协议的文件，但Vue使用webpack打包出来index.html文件中，引入js或css文件的路径是相对路径，我们需要进行修改，当然你可以手动去修改，但是考虑到每次build之后都要手动去更改的话，效率是非常低的。所以我们在读取index.html文件的内容之后，进行路径替换，代码如下：

function getWebContent(context:vscode.ExtensionContext,uri:string){
    const rootPath = context.extensionPath;
    const abPath = path.join(rootPath,uri);
    const dirPath = path.dirname(abPath);
    var html = fs.readFileSync(abPath,'utf-8');
    // vscode不支持直接加载本地资源，需要替换成其专有路径格式，这里只是简单的将样式和JS的路径替换
    html = html.replace(/(href=\.|src=\.)/g, function(m, ops, orgin){
        //这里去除后缀. ，然后再合并绝对路径，记得使用vscode-resource scheme
        const path = m.substring(0,m.length-1) +vscode.Uri.file(dirPath).with({ scheme: 'vscode-resource' }).toString();
        return  path;
    });
    console.log(html);
    return html;
}

踩坑二：.CSS文件的样式无法正常加载

Vue打包出来的CSS文件在VSCode中的Webview中可能无法显示（低版本VSCode中有问题），在VSCode中调试网页(在插件命令中打开，不是F12)，发现CSS文件是已经正确加载了的。当你遇到这个问题的时候，建议你直接把CSS代码拷贝过来，粘贴到index.html中。目前尚未查明原因。

踩坑三：不能使用acquireVsCodeApi()返回局部vscode实例

由于需要Vue的实例能与VSCode的webview通信，在VSCode Extension API中提供了专用的全局vscode实例，也就是通过js函数acquireVsCodeApi()返回。所以你需要在Vue将acquireVsCodeApi()返回的实例设为全局变量，避免重复生成而报错。

踩坑四：不能直接通过import方法将厚重的js文件引进到Vue中

项目由于需要引进一些之前的js文件，而这些js文件是由webpack打包出来的，假如在vue中直接通过import加载这些js文件，会提示js体积过大（大于500kb），构建过程失败。此时你需要使用webpack 的 extenals 扩展技术引入这些无需打包的文件，代码如下：
假设你有个a.js的文件，export为 export_xxx，你需要将这个文件拖到vue工程下的static路径中，然后webpack会在构建中在index.html中自动引入这个文件。你需要在webpack.dev.config.js和webpack.prod.config.js中加入

  output: {
    #浏览器中使用
    libraryTarget: "umd"
  },
  externals:{
    'vue_instance': 'export_xxxx'
  },

如果你想引用这个文件的内容，你需要在使用过的地方加入

import $ from vue_instance