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的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
让Firefox支持event对象实现代码
Nov 07 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
React中的Context应用场景分析
Jun 11 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轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
用js实现in_array的方法
2013/11/05 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
Python中删除文件的程序代码
2011/03/13 Python
urllib2自定义opener详解
2014/02/07 Python
Python 抓取动态网页内容方案详解
2014/12/25 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
python统计中文字符数量的两种方法
2019/01/31 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
培训心得体会
2013/12/29 职场文书
启动仪式策划方案
2014/06/14 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
宇宙与人观后感
2015/06/05 职场文书
初中数学教学随笔
2015/08/15 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
mysql 索引合并的使用
2021/08/30 MySQL