FE-star · tangmingxiang · Sep 10, 2022 · Sep 10, 2022 · Sep 10, 2022
diff --git a/README.md b/README.md
@@ -8,4 +8,7 @@
 ```
 * 在server.js中，实现ssr的服务端逻辑，处理页面和模板入参后，返回html页面到前端。
 
-* 参考示例：https://vuejs.org/guide/scaling-up/ssr.html#client-hydration
+* 参考示例：https://vuejs.org/guide/scaling-up/ssr.html#client-hydration
+
+-----------------------------------------------------------------------------
+## 必须先 npm run start 再 npm run test 进行单元测试 
diff --git a/app.js b/app.js
@@ -0,0 +1,14 @@
+import { createSSRApp } from 'vue'
+
+export function createAppH() {
+  return createSSRApp({
+    template: `<div>Vue SSR Example</div>`
+  })
+}
+
+export function createApp() {
+  return createSSRApp({
+    data: () => ({ count: 1 }),
+    template: `<button @click="count++">{{ count }}</button>`
+  })
+}
diff --git a/client.js b/client.js
@@ -0,0 +1,4 @@
+// client.js
+import { createApp } from './app.js'
+
+createApp().mount('#app')
diff --git a/package.json b/package.json
@@ -16,6 +16,6 @@
     "express": "^4.18.1",
     "jest": "^29.0.0",
     "puppeteer": "^16.2.0",
-    "vue": "^3.2.37"
+    "vue": "^3.2.39"
   }
 }
diff --git a/server.js b/server.js
@@ -1 +1,46 @@
-// TODO 监听3000端口，便于执行test
+import express from 'express'
+// import { createApp } from './app.js'
+import { createAppH } from './app.js'
+import { renderToString } from 'vue/server-renderer'
+
+const serve = express()
+
+serve.get('/',(req, res) => {
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'text/html');
+  renderToString(createAppH()).then((html) => {
+    res.send(`<div id="app">${html}</div>`)
+  })
+})
+
+// 用于测试客户端激活 Vue，与 homework 无关
+serve.get('/ccc',(req, res) => {
+  res.statusCode = 200;
+  renderToString(createApp()).then((html) => {
+    res.send(`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>Vue SSR Example</title>
+        <script type="importmap">
+          {
+            "imports": {
+              "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
+            }
+          }
+        </script>
+        <script type="module" src="./client.js"></script>
+      </head>
+      <body>
+        <div id="app">${html}</div>
+      </body>
+    </html>
+    `)
+  })
+})
+
+serve.use(express.static('.'))
+
+serve.listen(3000, '127.0.0.1', () => {
+  console.log('服务已启动');
+})
diff --git a/test/index.spec.js b/test/index.spec.js
@@ -2,9 +2,12 @@ const puppeteer = require("puppeteer");
 
 describe('NuxtLogo', () => {
   test('is a Vue instance', async () => {
-    const browser = await puppeteer.launch({ ignoreDefaultArgs: ['--disable-extensions'] });
+    const browser = await puppeteer.launch({ 
+      ignoreDefaultArgs: ['--disable-extensions'],
+      executablePath: 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe'
+    });
     const page = await browser.newPage();
-    await page.goto('http://localhost:3000')
+    await page.goto('http://127.0.0.1:3000')
     const bodyHandle = await page.$('body');
     const bodyInnerHTML = await page.evaluate(dom => dom.innerHTML, bodyHandle);
     await bodyHandle.dispose();