vscode 插件开发 + vue的操作方法
更新时间：2020年06月05日 10:49:31 作者：长命百岁
这篇文章主要介绍了vscode 插件开发 + vue的操作方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
如果我们需要在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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
表单验证在很多地方都可以用的到，本文主要介绍了element自定义表单验证上传身份证正反面的实现，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
本文详细介绍了VueRouter 路由的概念、规则、基础等相关内容，文中运用大量的图片进行讲解，感兴趣的小伙伴可以看一看这篇文章2021-08-08
vue使用富文本编辑器vue-quill-editor的操作指南和注意事项
vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想,所以果断使用vue-quill-editor来实现,下面这篇文章主要给大家介绍了关于vue使用富文本编辑器vue-quill-editor的操作指南和注意事项,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue中pc移动滚动穿透问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了Vue路由重复点击报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家详细介绍了vue实现商城上货组件简易版，50行js代码实现效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
Vue-router 报错NavigationDuplicated的解决方法
这篇文章主要介绍了Vue-router 报错NavigationDuplicated的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了vue单页面如何解决多个视频同时仅能播放一个问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
前端vue uni-app cc-countdown倒计时组件使用详解
cc-countdown是一个倒计时组件，它可以显示剩余时间、天数、小时数、分钟数和秒数，在本文中，我们将介绍如何在uni-app中使用cc-countdown组件,需要的朋友可以参考下2023-08-08
本篇文章主要介绍了Vue 组件间的样式冲突污染，当多个样式出现时，就会导致样式冲突，本文介绍了具体解决方法2017-08-08
最新评论