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 相关文章推荐
javascript+xml技术实现分页浏览
Jul 27 Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
vee-validate vue 2.0自定义表单验证的实例
Aug 28 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 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&amp;&amp;mysql)四
2006/10/09 PHP
PHP的分页功能
2007/03/21 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
js微信支付实现代码
2016/12/22 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
jQuery提示框插件SweetAlert用法分析
2019/08/05 jQuery
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
Ubuntu下安装PyV8
2016/03/13 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
python列表的增删改查实例代码
2018/01/30 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
如何将字串String转换成整数int
2015/02/21 面试题
C语言编程题
2015/03/09 面试题
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
单位刻章介绍信范文
2014/01/11 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
2015中学学校工作总结
2015/07/20 职场文书
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技