溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間：2020-07-18 13:33:05 來源：億速云 閱讀：812 作者：小豬 欄目：web開發(fā)

這篇文章主要講解了vscode插件開發(fā)嵌入vue的操作方法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

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

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

　　-這里要注意的是，要確保vue項目里面的public有一個index用作插件打開時的模板，等一下需要做base的特換，不然插件是不知道網(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.把打包好的整個dist考到vscode插件里面

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

const panel = vscode.window.createWebviewPanel(
        'testWebview', // viewType
        "WebView演示", // 視圖標題
        vscode.ViewColumn.One, // 顯示在編輯器的哪個部位
        {
          enableScripts: true, // 啟用JS，默認禁用
          retainContextWhenHidden: true, // webview被隱藏時保持狀態(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;

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

看完上述內(nèi)容，是不是對vscode插件開發(fā)嵌入vue的操作方法有進一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手