/*使用scss*/什么是维特？比如Webpack的开发服务器有什么区别）Vite在开发的时候是没有打包过程的。ES模块源码直接传给浏览器。浏览器使用自己的http://localhost:3000/App.vue主模板import{updateStyle}from"/@hmr";//加载更新样式方法const__script={data:()=>({count:0})};updateStyle("c44b8200-0","/App.vue?type=style&index=0");__script.__scopeId="data-v-c44b8200";import{renderas__render}from"/App.vue?type=template";//加载模板template__script.render=__render;__script.__hmrId="/App.vue";__script.__file="/Users/shoyuf/work/vite-app/App.vue";exportdefault__script;/@hmr更新逻辑console.log([vite]connecting...");constsocket=newWebSocket(`ws://${location.host}`);//监听消息socket.addEventListener("message",({data})=>{const{type,path,id,index,timestamp}=JSON.parse(data);switch(type){case"连接ed"://连接成功console.log(`[vite]connected.`);break;case"vue-reload"://当脚本改变时，需要重新加载import(`${path}?t=${timestamp}`).then(m=>{__VUE_HMR_RUNTIME__.reload(path,m.default);console.log(`[vite]${path}reloaded.`);});break;case"vue-rerender"://当模板改变时，需要重新渲染import(`${path}?type=template&t=${timestamp}`).then(m=>{__VUE_HMR_RUNTIME__.rerender(path,m.render);console.log(`[vite]${path}templateupdated.`);});break;case"vue-style-update"://当css改变时更新样式updateStyle(id,`${path}?type=style&index=${index}&t=${timestamp}`);console.log(`[vite]${path}style${index>0?`#${index}`:``}updated.`);break;case"vue-style-remove"://在css更改后删除旧的css引用constlink=document.getElementById(`vite-css-${id}`);if(link){document.head.removeChild(link);}break;case"js-update"://js模块更新重新加载constupdate=jsUpdateMap.get(path);如果（更新）{更新（时间戳）；console.log(`[vite]:js模块重新加载:`,路径);}else{console.error(`[vite]收到js更新通知，但没有注册客户端回调。出了点问题。`);}休息;页面重新加载location.reload();}});//pingserversocket.addEventListener("close",()=>{console.log(`[vite]服务器连接丢失。轮询重启...`);setInterval(()=>{newWebSocket(`ws://${location.host}`).addEventListener("open",()=>{location.reload();});},1000);});exportfunctionupdateStyle(id,url){constlinkId=`vite-css-${id}`;让link=document.getElementById(linkId);如果(!link){link=document.createElement("link");link.id=linkId;link.setAttribute("rel","stylesheet");link.setAttribute(“类型”，“文本/CSS”）；文档.head.appendChild（链接）；}link.setAttribute("href",url);}constjsUpdateMap=newMap();exportconsthot={accept(importer,deps,callback){jsUpdateMap.set(importer,timestamp=>{if(Array.isArray(deps)){Promise.all(deps.map(dep=>import(dep+`?t=${timestamp}`))).then(callback);}else{import(deps+`?t=${时间戳}`).then(回调);}});从"/@modules/vue";const_withId=_withScopeId("data-v-c44b8200");_pushScopeId("data-v-c44b8200");const_hoisted_1=_createVNode(//创建VirtualDOM"h1",null,"HelloVite+Vue3!",-1/*HOISTED*/);const_hoisted_2=_createVNode("p",null,"编辑./App.vue以测试热模块替换(HMR)。",-1/*HOISTED*/);_popScopeId();exportconstrender=_withId(functionrender(_ctx,_cache){//渲染函数return(_openBlock(),_createBlock(_Fragment,null,[_hoisted_1,_hoisted_2,_createVNode("p",null,[_createVNode("span",null,"Countis:"+_toDisplayString(_ctx.count),1/*TEXT*/),_createVNode("button",{onClick:_cache[1]||(_cache[1]=$event=>_ctx.count++)},"increment")])],64/*STABLE_FRAGMENT*/));});/App.vue?type=style&index=0主模板css部分，包括scopedIdh1[data-v-c44b8200]{color:#4fc08d;}h1[data-v-c44b8200],p[data-v-c44b8200]{font-family:Arial,Helvetica,sans-serif;}ws://localost:3000/进行热替换的数据交互,与/@hmr链接示例：{路径："/App.vue",timestamp:1588242356511,type:"vue-reload"}type与@hmr的相关方法一致vue-reloadvue-rerendervue-style-updatevue-style-removejs-updatefull-reloadwebpack很慢参考vuejs/vite：用于VueSFC的实验性无捆绑开发服务器
