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

时间：2021-05-26

如果我们需要在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内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章