vscode 插件開發(fā) + vue的操作方法

更新時(shí)間：2020年06月05日 10:49:31 作者：長命百歲

這篇文章主要介紹了vscode 插件開發(fā) + vue的操作方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

如果我們需要在vscode中嵌入自己開發(fā)的vue頁面就需要以下的操作

1.把開發(fā)好的vue項(xiàng)目打包，如果打包出來的vue執(zhí)行是空白頁，就需要看看之前我寫的文章，vue 3 clie打包配置

　　-這里要注意的是，要確保vue項(xiàng)目里面的public有一個(gè)index用作插件打開時(shí)的模板，等一下需要做base的特?fù)Q，不然插件是不知道網(wǎng)頁的根目錄在哪里

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.把打包好的整個(gè)dist考到vscode插件里面

　　-vscode插件的命令行觸發(fā)函數(shù)里面，需要這樣寫

const panel = vscode.window.createWebviewPanel(
        'testWebview', // viewType
        "WebView演示", // 視圖標(biāo)題
        vscode.ViewColumn.One, // 顯示在編輯器的哪個(gè)部位
        {
          enableScripts: true, // 啟用JS，默認(rèn)禁用
          retainContextWhenHidden: true, // webview被隱藏時(shí)保持狀態(tài)，避免被重置
        }
      );
      //加載本地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;

這樣，打開的頁面就能正確顯示

總結(jié)

到此這篇關(guān)于vscode 插件開發(fā) + vue的操作方法的文章就介紹到這了,更多相關(guān)vscode 插件開發(fā) vue內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: