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内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
Promise.all中对于reject的处理方法
Aug 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
javascript删除字符串最后一个字符
2014/01/14 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python实现的文件夹清理程序分享
2014/11/22 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
详解Python3 基本数据类型
2019/04/19 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
贷款担保书
2015/01/20 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python
vue修饰符.capture和.self的区别
2022/04/22 Vue.js
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle