溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了vscode插件開發嵌入vue的操作方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
如果我們需要在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的操作方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
