diff --git a/README.md b/README.md
index fa2a3fd..c9faf9a 100644
--- a/README.md
+++ b/README.md
@@ -8,4 +8,7 @@
```
* 在server.js中,实现ssr的服务端逻辑,处理页面和模板入参后,返回html页面到前端。
-* 参考示例:https://vuejs.org/guide/scaling-up/ssr.html#client-hydration
\ No newline at end of file
+* 参考示例:https://vuejs.org/guide/scaling-up/ssr.html#client-hydration
+
+-----------------------------------------------------------------------------
+## 必须先 npm run start 再 npm run test 进行单元测试
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..a9ea4a3
--- /dev/null
+++ b/app.js
@@ -0,0 +1,14 @@
+import { createSSRApp } from 'vue'
+
+export function createAppH() {
+ return createSSRApp({
+ template: `
Vue SSR Example
`
+ })
+}
+
+export function createApp() {
+ return createSSRApp({
+ data: () => ({ count: 1 }),
+ template: ``
+ })
+}
\ No newline at end of file
diff --git a/client.js b/client.js
new file mode 100644
index 0000000..9292b7c
--- /dev/null
+++ 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
index f081cee..3b64505 100644
--- 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
index a5cefe0..2507bb0 100644
--- 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(`${html}
`)
+ })
+})
+
+// 用于测试客户端激活 Vue,与 homework 无关
+serve.get('/ccc',(req, res) => {
+ res.statusCode = 200;
+ renderToString(createApp()).then((html) => {
+ res.send(`
+
+
+
+ Vue SSR Example
+
+
+
+
+ ${html}
+
+
+ `)
+ })
+})
+
+serve.use(express.static('.'))
+
+serve.listen(3000, '127.0.0.1', () => {
+ console.log('服务已启动');
+})
\ No newline at end of file
diff --git a/test/index.spec.js b/test/index.spec.js
index 0567ead..4648245 100644
--- 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();