当前位置: 首页> 汽车> 行情 > 【Web IDE】WebContainer容器在浏览器中启动运行nodejs并使用vite启动项目

【Web IDE】WebContainer容器在浏览器中启动运行nodejs并使用vite启动项目

时间:2025/7/12 2:36:57来源:https://blog.csdn.net/sky529063865/article/details/141299610 浏览次数: 0次

参考了文章WebContainer/api 基础(Web IDE 技术探索 一)

在浏览器中运行vite的vue3项目

示例站点

最终效果

在这里插入图片描述

主要流程

加载WebContainer=》加载代码压缩包=>解压代码压缩包=》生成文件树=》挂载文件树=》pnpm安装依赖=》启动项目

代码

<script setup>
import { onMounted, ref } from 'vue'
import { WebContainer } from "@webcontainer/api";
import { mountZip } from '@/views/Containers/utls.js'
const webUrl = ref("");
const codeZip = '/code/vue-project.zip'
async function initContainer() {console.log("挂载")// Call only onceconst webcontainerInstance = await WebContainer.boot();const nodeV = await webcontainerInstance.spawn("node", ["-v"]);nodeV.output.pipeTo(new WritableStream({write(data) {console.log("node -v ==>", data);},}));const fileTree =  await mountZip(codeZip)console.log('挂载文件',fileTree)// 1. 挂载文件await webcontainerInstance.mount(fileTree);console.log("ls");const ls = await webcontainerInstance.spawn("ls", ["-al"]);ls.output.pipeTo(new WritableStream({write(data) {console.log(data);},}));// 2. 下载依赖console.log("pnpm install");const install = await webcontainerInstance.spawn("pnpm", ["install"]);install.output.pipeTo(new WritableStream({write(data) {console.log(data);},}));// 3. 判断exit 状态let code = await install.exit;if (code !== 0) {console.error("error to install.");}// 4. 启动服务console.log("npm run dev");const process = await webcontainerInstance.spawn("npm", ["run","dev"]);process.output.pipeTo(new WritableStream({write(data) {console.log(data);},}));// 5. 监听服务启动webcontainerInstance.on("server-ready", (port, url) => {console.log("server-ready", url);webUrl.value = url;});
}onMounted(() => {mountZip(codeZip)initContainer()
})
</script><template>
<div><iframe :src="webUrl" style="height: 100vh;width: 100%"/>
</div>
</template><style scoped></style>

工具函数

import JSZip from 'jszip'
export async function  mountZip(zipUrl){console.log("读取zip文件",zipUrl)const fileTree = {}try {// 使用 fetch 获取 ZIP 数据const response = await fetch(zipUrl);const buffer = await response.arrayBuffer();// 使用 JSZip 处理获取到的数据const zip = new JSZip();const zipContents = await zip.loadAsync(buffer);// 处理解压后的内容for (const [relativePath, file] of Object.entries(zipContents.files)) {// console.log('relativePath',relativePath)if(file.dir){let dirList = relativePath.split('/')// console.log('dirList',dirList)if(dirList.length > 2){let tmp = fileTreefor (let i = 0; i < dirList.length - 1; i++) {// console.log('tmp(dirList[i]',tmp[dirList[i]])if(tmp[dirList[i]]){tmp = tmp[dirList[i]].directory}else{tmp[dirList[i]] = {directory: {},}}}}else{fileTree[dirList[0]] = {directory: {},}}}else{let dirList = relativePath.split('/')// console.log('dirList',dirList)if(dirList.length > 1) {let tmp = fileTreefor (let i = 0; i < dirList.length - 1; i++) {// console.log('tmp(dirList[i]', tmp[dirList[i]])if (tmp[dirList[i]]) {tmp = tmp[dirList[i]].directory} else {tmp[dirList[i]] = {directory: {},}}}// console.log('tmp',tmp)tmp[dirList[dirList.length - 1]] = {file: {contents: await file.async('string')},}}else{// console.log('根目录文件',dirList)fileTree[dirList[dirList.length - 1]] = {file: {contents: await file.async('string')},}}}}} catch (error) {console.error('获取 ZIP 数据时出错:', error);}console.log('fileTree',fileTree)return fileTree
}
关键字:【Web IDE】WebContainer容器在浏览器中启动运行nodejs并使用vite启动项目

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: