如果我们需要在vscode中嵌入自己开发的vue页面就需要以下的操作1.把开发好的vue项目打包，如果打包出来的vue执行是空白页，就需要看看之前我写的文章，vue 3 clie打包配置
-这里要注意的是，要确保vue项目里面的public有一个index用作插件打开时的模板，等一下需要做base的特换，不然插件是不知道网页的根目录在哪里index.html-vue.config.js的配置









































-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'))


}
}
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('', ``);


// console.log(indexHtml)

panel.webview.html = indexHtml;
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('', ``);


// console.log(indexHtml)

panel.webview.html = indexHtml;这样，打开的页面就能正确显示总结总结总结