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 prototype,executing,context,closure
Dec 24 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
js以对象为索引的关联数组
Jul 04 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
js对象基础实例分析
Jan 13 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
js实现图片粘贴到网页
Dec 06 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 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
使用URL传输SESSION信息
2015/07/14 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
python实现在windows下操作word的方法
2015/04/28 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
Python yield的用法实例分析
2020/03/06 Python
python异步Web框架sanic的实现
2020/04/27 Python
python中Django文件上传方法详解
2020/08/05 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
国外软件测试工程师面试题
2016/12/09 面试题
电子信息专业应届生自荐信
2014/06/04 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
委托收款证明
2015/06/23 职场文书
事业单位岗位说明书
2015/10/08 职场文书
pandas求平均数和中位数的方法实例
2021/08/04 Python