新聞中心
這篇文章主要講解了vscode插件開發(fā)嵌入vue的操作方法,內(nèi)容清晰明了,對此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會有幫助。
成都創(chuàng)新互聯(lián)公司主要為客戶提供服務(wù)項目涵蓋了網(wǎng)頁視覺設(shè)計、VI標(biāo)志設(shè)計、全網(wǎng)營銷推廣、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式成都網(wǎng)站建設(shè)、手機網(wǎng)站制作、微商城、網(wǎng)站托管及成都網(wǎng)站維護、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計、SEO優(yōu)化排名。設(shè)計、前端、后端三個建站步驟的完善服務(wù)體系。一人跟蹤測試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為輕質(zhì)隔墻板行業(yè)客戶提供了網(wǎng)站建設(shè)服務(wù)。
如果我們需要在vscode中嵌入自己開發(fā)的vue頁面就需要以下的操作
1.把開發(fā)好的vue項目打包,如果打包出來的vue執(zhí)行是空白頁,就需要看看之前我寫的文章,vue 3 clie打包配置
-這里要注意的是,要確保vue項目里面的public有一個index用作插件打開時的模板,等一下需要做base的特換,不然插件是不知道網(wǎng)頁的根目錄在哪里
index.html
-vue.config.js的配置
Test
-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演示", // 視圖標(biāo)題 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('', ` `); // console.log(indexHtml) panel.webview.html = indexHtml;
這樣,打開的頁面就能正確顯示
看完上述內(nèi)容,是不是對vscode插件開發(fā)嵌入vue的操作方法有進一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
新聞標(biāo)題:vscode插件開發(fā)嵌入vue的操作方法
地址分享:http://fisionsoft.com.cn/article/jdhhde.html