vscode插件开发 webview使用外部项目

最新推荐文章于 2024-06-03 17:00:01 发布

ccccreamm

最新推荐文章于 2024-06-03 17:00:01 发布

阅读量1.2k

点赞数 1

文章标签： node.js

本文链接：https://blog.csdn.net/weixin_43453629/article/details/118549258

版权

可以直接在vscode插件代码中引入本地html文件

function getViewContent(context, templatePath) {
  const resourcePath = path.join(context.extensionPath, templatePath);
  const dirPath = path.dirname(resourcePath);
  let html = fs.readFileSync(resourcePath, 'utf-8');
  // vscode不支持直接加载本地资源，需要替换成其专有路径格式，这里只是简单的将样式和JS的路径替换
  html = html.replace(/(<link.+?href="|<script.+?src="|<img.+?src=")(.+?)"/g, (m, $1, $2) => {
    return $1 + vscode.Uri.file(path.resolve(dirPath, $2)).with({ scheme: 'vscode-resource' }).toString() + '"';
  });
  return html;
}

使用：

 panel.webview.html = getViewContent(context, 'src/view/demo.html');
 //第二个参数为webview在代码中的路径

使用打包后的外部项目的js文件

function getPubWebviewContent(pubLink) {
  return `<html>
  <body>
  <div id="root"></div>
    <script src="${pubLink}"></script>
  </body>
</html>`;
}

使用：

const link = vscode.Uri.file(
        path.resolve(__dirname, "./assert/bundle.js")
        //js文件为项目打包生成的js文件
      )
        .with({ scheme: "vscode-resource" })
        .toString();
      panel.webview.html = getPubWebviewContent(link);

ccccreamm

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vscode插件开发 webview使用外部项目

可以直接在vscode插件代码中引入本地html文件function getViewContent(context, templatePath) { const resourcePath = path.join(context.extensionPath, templatePath); const dirPath = path.dirname(resourcePath); let html = fs.readFileSync(resourcePath, 'utf-8'); // vsc.
复制链接

扫一扫