vscode插件开发嵌入vue的操作方法

这篇文章主要讲解了vscode插件开发嵌入vue的操作方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

成都创新互联公司主要为客户提供服务项目涵盖了网页视觉设计、VI标志设计、全网营销推广、网站程序开发、HTML5响应式成都网站建设、手机网站制作、微商城、网站托管及成都网站维护、WEB系统开发、域名注册、国内外服务器租用、视频、平面设计、SEO优化排名。设计、前端、后端三个建站步骤的完善服务体系。一人跟踪测试的建站服务标准。已经为轻质隔墙板行业客户提供了网站建设服务。

如果我们需要在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的操作方法
URL标题：https://www.cdcxhl.com/article14/jdhhde.html

成都网站建设公司_创新互联，为您提供虚拟主机、App设计、网站维护、网页设计公司、定制开发、电子商务

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容