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 相关文章推荐
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
创建nuxt.js项目流程图解
Mar 13 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
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
php构造函数与析构函数
2016/04/23 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
python用来获得图片exif信息的库实例分析
2015/03/16 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
python super的使用方法及实例详解
2019/09/25 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
Python如何输出警告信息
2020/07/30 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
新东网科技Java笔试题
2012/07/13 面试题
工厂厂长岗位职责
2013/11/08 职场文书
个人充满哲理的自我评价
2014/02/20 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
安全责任协议书
2014/04/21 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
教师病假条范文
2015/08/17 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
Python词云的正确实现方法实例
2021/05/08 Python