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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
javascript实现五星评分功能
Nov 10 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
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
桌面中心(一)创建数据库
2006/10/09 PHP
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
模仿jQuery each函数的链式调用
2009/07/22 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
深入理解Python3中的http.client模块
2017/03/29 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
python在不同条件下的输入与输出
2020/02/13 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
医学院学生的自我评价分享
2013/11/19 职场文书
球队口号
2014/06/18 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
公司酒会主持词
2015/07/02 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
高二英语教学反思
2016/03/03 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server