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脚本性能优化注意事项
Nov 18 Javascript
JavaScript 调试器简介
Feb 21 Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
微信小程序url与token设置详解
Sep 26 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 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 截取字符串专题集合
2010/08/19 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
php编程每天必学之表单验证
2016/03/01 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
angular.foreach 循环方法使用指南
2015/01/06 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
python多进程使用函数封装实例
2020/05/02 Python
python如何查看安装了的模块
2020/06/23 Python
python Selenium 库的使用技巧
2020/10/16 Python
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
给排水工程师岗位职责
2013/11/21 职场文书
教师先进个人材料
2014/12/17 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js