Merge pull request #1067 from nonameShijian/PR-Branch

完善vue部分代码

service-worker.js

@@ -16,13 +16,12 @@ if (typeof ts != 'undefined') {
 }
 // @ts-ignore
 if (typeof sfc != 'undefined') {
-	console.log(`sfc loaded`, sfc);
+	console.log(`sfc loaded`);
 	sfc.registerTS(() => ts);
 } else {
 	console.log(`sfc undefined`);
 }
 
-
 console.log('serviceWorker version 2.3');
 
 self.addEventListener("install", (event) => {
@@ -95,7 +94,9 @@ self.addEventListener('fetch', event => {
 				} else if (request.url.endsWith('.vue')) {
 					const id = Date.now().toString();
 					const scopeId = `data-v-${id}`;
-					const { descriptor } = sfc.parse(text);
+					// 后续处理sourceMap合并
+					const { descriptor } = sfc.parse(text, { filename: request.url, sourceMap: true });
+					// console.log({ descriptor });
 					const hasScoped = descriptor.styles.some((s) => s.scoped);
 					// 编译 script，因为可能有 script setup，还要进行 css 变量注入
 					const script = sfc.compileScript(descriptor, {
@@ -110,16 +111,17 @@ self.addEventListener('fetch', event => {
 					});
 					// 用于存放代码，最后 join('\n') 合并成一份完整代码
 					const codeList = [];
-					// 重写 default
 					vueFileMap.set(
 						request.url + '?type=script',
+						// 重写 default
 						sfc.rewriteDefault(script.content, "__sfc_main__")
 							.replace(`const __sfc_main__`, `export const __sfc_main__`)
+							// import vue重新指向
 							.replaceAll(`from "vue"`, `from "/game/vue.esm-browser.js"`)
 							.replaceAll(`from 'vue'`, `from '/game/vue.esm-browser.js'`)
 					);
 					codeList.push(`import { __sfc_main__ } from '${request.url}?type=script'`);
-					codeList.push(`__sfc_main__.__scopeId='${scopeId}'`);
+					codeList.push(`__sfc_main__.__scopeId = '${scopeId}'`);
 
 					// 编译模板，转换成 render 函数
 					const template = sfc.compileTemplate({
@@ -127,24 +129,22 @@ self.addEventListener('fetch', event => {
 						filename: request.url, // 用于错误提示
 						id: scopeId,
 						scoped: hasScoped,
-						inlineTemplate: true,
 						compilerOptions: {
 							scopeId: hasScoped ? scopeId : undefined,
 						}
 					});
 
-					codeList.push(`import { render } from '${request.url}?type=template'`);
-
 					vueFileMap.set(request.url + '?type=template', template.code
-						.replace(`function render(_ctx, _cache) {`, str => str + 'console.log(_ctx);')
+						// .replace(`function render(_ctx, _cache) {`, str => str + 'console.log(_ctx);')
 						.replaceAll(`from "vue"`, `from "/game/vue.esm-browser.js"`)
 						.replaceAll(`from 'vue'`, `from '/game/vue.esm-browser.js'`)
 					);
 					
+					codeList.push(`import { render } from '${request.url}?type=template'`);
 					codeList.push(`__sfc_main__.render = render;`);
 					codeList.push(`export default __sfc_main__;`);
-
 					// 一个 Vue 文件，可能有多个 style 标签
+					let styleIndex = 0;
 					for (const styleBlock of descriptor.styles) {
 						const styleCode = sfc.compileStyle({
 							source: styleBlock.content,
@@ -152,11 +152,12 @@ self.addEventListener('fetch', event => {
 							filename: request.url,
 							scoped: styleBlock.scoped,
 						});
-						const styleDOM = `var el = document.createElement('style');\nel.innerHTML =  \`${styleCode.code}\`;document.body.append(el);`;
+						const varName = `el${ styleIndex }`;
+						const styleDOM = `let ${ varName } = document.createElement('style');\n${ varName }.innerHTML =  \`${styleCode.code}\`;\ndocument.body.append(${ varName });`;
 						codeList.push(styleDOM);
 					}
-					const code = codeList.join('\n');
+					js = codeList.join('\n');
-					js = code;
+					// console.log(js);
 				}
 				const rep = new Response(new Blob([js], { type: "text/javascript" }), {
 					status: 200,