vscode 插件開(kāi)發(fā) + vue的操作方法
如果我們需要在vscode中嵌入自己開(kāi)發(fā)的vue頁(yè)面就需要以下的操作
1.把開(kāi)發(fā)好的vue項(xiàng)目打包，如果打包出來(lái)的vue執(zhí)行是空白頁(yè)，就需要看看之前我寫(xiě)的文章，vue 3 clie打包配置
-這里要注意的是，要確保vue項(xiàng)目里面的public有一個(gè)index用作插件打開(kāi)時(shí)的模板，等一下需要做base的特?fù)Q，不然插件是不知道網(wǎng)頁(yè)的根目錄在哪里
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='http://www.gepszalag.com/bcjs/<%= BASE_URL %>favicon.ico'> <title>Test</title> <base href='http://www.gepszalag.com/'> </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ù)里面，需要這樣寫(xiě)
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頁(yè)面 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='http://www.gepszalag.com/bcjs/${String(baseUri)}/'>`); // console.log(indexHtml) panel.webview.html = indexHtml;
這樣，打開(kāi)的頁(yè)面就能正確顯示
總結(jié)
到此這篇關(guān)于vscode 插件開(kāi)發(fā) + vue的操作方法的文章就介紹到這了,更多相關(guān)vscode 插件開(kāi)發(fā) vue內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. XML解析錯(cuò)誤：未組織好 的解決辦法2. XML入門(mén)的常見(jiàn)問(wèn)題(一)3. HTML5 Canvas繪制圖形從入門(mén)到精通4. css代碼優(yōu)化的12個(gè)技巧5. 詳解瀏覽器的緩存機(jī)制6. asp知識(shí)整理筆記4（問(wèn)答模式）7. XML入門(mén)的常見(jiàn)問(wèn)題(四)8. asp批量添加修改刪除操作示例代碼9. 微信開(kāi)發(fā) 網(wǎng)頁(yè)授權(quán)獲取用戶(hù)基本信息10. javascript xml xsl取值及數(shù)據(jù)修改第1/2頁(yè)
網(wǎng)公網(wǎng)安備