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();