vscode 插件开发 + vue的操作方法


Posted in Javascript onJune 05, 2020

如果我们需要在vscode中嵌入自己开发的vue页面就需要以下的操作

1.把开发好的vue项目打包,如果打包出来的vue执行是空白页,就需要看看之前我写的文章,vue 3 clie打包配置

-这里要注意的是,要确保vue项目里面的public有一个index用作插件打开时的模板,等一下需要做base的特换,不然插件是不知道网页的根目录在哪里

index.html

-vue.config.js的配置

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>Test</title>
  <base href="/">
 </head>
 <body>
  <div id="app"></div>
 </body>
</html>

-vue.config.js的配置

const path = require('path');
function resolve (dir) {
  return path.join(__dirname, dir)
}


module.exports = {
  // 基本路径
  publicPath: './',
  // 输出文件目录
  outputDir: 'dist',
  pages: {
   index: {
    entry: 'src/main.js',
    template: 'public/index.html',
    filename: 'index.html',
    chunks: ['chunk-vendors', 'chunk-common', 'index']
   }
  },
  lintOnSave:false,
  configureWebpack: {
   externals: {
   }
  },
  chainWebpack: (config)=>{
   //修改文件引入自定义路径
   config.resolve.alias
     .set('@', resolve('src'))
     .set('~assets',resolve('src/assets'))
     // .set('ide',resolve('src/ide'))

  }
 }

2.把打包好的整个dist考到vscode插件里面

-vscode插件的命令行触发函数里面,需要这样写

const panel = vscode.window.createWebviewPanel(
        'testWebview', // viewType
        "WebView演示", // 视图标题
        vscode.ViewColumn.One, // 显示在编辑器的哪个部位
        {
          enableScripts: true, // 启用JS,默认禁用
          retainContextWhenHidden: true, // webview被隐藏时保持状态,避免被重置
        }
      );
      //加载本地html页面
      let srcPath = path.join(context.extensionPath, 'dist');
      // console.log(srcPath)
      const srcPathUri = vscode.Uri.file(srcPath);
      // console.log(srcPathUri.path)
      const baseUri = panel.webview.asWebviewUri(srcPathUri);
      // console.log(baseUri)
      const indexPath = path.join(srcPath, 'index.html');
      // console.log(indexPath)
      var indexHtml = fs.readFileSync(indexPath, "utf8");


      indexHtml = indexHtml.replace('<base href=/ >', `<base href="${String(baseUri)}/">`);

      // console.log(indexHtml)
      panel.webview.html = indexHtml;

这样,打开的页面就能正确显示

总结

到此这篇关于vscode 插件开发 + vue的操作方法的文章就介绍到这了,更多相关vscode 插件开发 vue内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery控制listbox中项的移动并排序
Nov 12 Javascript
Javascript UrlDecode函数代码
Jan 09 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
event.X和event.clientX的区别分析
Oct 06 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
详解js私有作用域中创建特权方法
Jan 25 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
微信小程序基础教程之echart的使用
Jun 01 Javascript
vue渲染方式render和template的区别
Jun 05 #Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 #Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 #Javascript
VueX模块的具体使用(小白教程)
Jun 05 #Javascript
Vuex的热更替如何实现
Jun 05 #Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 #Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 #Javascript
You might like
Protoss魔法科技
2020/03/14 星际争霸
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
jquery replace方法去空格
2017/05/08 jQuery
javascript兼容性(实例讲解)
2017/08/15 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
Python实现的弹球小游戏示例
2017/08/01 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
django框架中间件原理与用法详解
2019/12/10 Python
python批量处理txt文件的实例代码
2020/01/13 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
会计电算化专业应届大学生求职信
2013/10/22 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
激励员工的口号
2014/06/16 职场文书
银行给客户的感谢信
2015/01/23 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
mysql 排序失效
2022/05/20 MySQL