微客导航 » 文章资讯 » vscode 插件开发 + vue的操作方法

vscode 插件开发 + vue的操作方法

2023-07-23 16:00:03 135

如果我们需要在vscode中嵌入自己开发的vue页面就需要以下的操作

1.把开发好的vue项目打包，如果打包出来的vue执行是空白页，就需要看看之前我写的文章，vue3clie打包配置

-这里要注意的是，要确保vue项目里面的public有一个index用作插件打开时的模板，等一下需要做base的特换，不然插件是不知道网页的根目录在哪里

index.html

-vue.config.js的配置







favicon.ico">
Test

-vue.config.js的配置

constpath=require('path');
functionresolve(dir){
returnpath.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插件的命令行触发函数里面，需要这样写

constpanel=vscode.window.createWebviewPanel(
'testWebview',//viewType
"WebView演示",//视图标题
vscode.ViewColumn.One,//显示在编辑器的哪个部位
{
enableScripts:true,//启用JS，默认禁用
retainContextWhenHidden:true,//webview被隐藏时保持状态，避免被重置
}
);
//加载本地html页面
letsrcPath=path.join(context.extensionPath,'dist');
//console.log(srcPath)
constsrcPathUri=vscode.Uri.file(srcPath);
//console.log(srcPathUri.path)
constbaseUri=panel.webview.asWebviewUri(srcPathUri);
//console.log(baseUri)
constindexPath=path.join(srcPath,'index.html');
//console.log(indexPath)
varindexHtml=fs.readFileSync(indexPath,"utf8");


indexHtml=indexHtml.replace('',``);

//console.log(indexHtml)
panel.webview.html=indexHtml;

这样，打开的页面就能正确显示

总结

到此这篇关于vscode插件开发+vue的操作方法的文章就介绍到这了,更多相关vscode插件开发vue内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
3162201930
czq8825@qq.com

vscode 插件开发 + vue的操作方法

热门推荐

随机推荐