vue3_008005Express搭建SSR

Express是一个基于Node.js平台的Web应用开发框架，用来快速开发Web应用。

①在vue-ssr项目中执行如下命令，安装Express框架

PS D:\zwd08zhang\vue-ssr> npm install express@4.17.x --save  npm WARN vue-ssr@1.0.0 No description npm WARN vue-ssr@1.0.0 No repository field. + express@4.17.3 added 49 packages from 36 contributors in 5.4s 6 packages are looking for funding  run `npm fund` for details

安装Express框架 安装成功

相关知识点：

1、require('vue-server-renderer')

表示：调用createRenderer方法

作用：引入vue-server-renderer，创建了一个渲染器实例renderer。这个实例将用于后续的渲染操作

2、template:require('fs').readFileSync('./template.html','utf-8')

作用：配置模板：在createRenderer方法的配置对象中，通过template属性指定了一个HTML模板文件./template.html。这个模板文件是一个普通的HTML文件，但它包含了一些特殊的占位符（如<!--vue-ssr-outlet-->），这些占位符会被Vue组件的渲染结果所替换。

使用require('fs').readFileSync('./template.html', 'utf-8')读取模板文件的内容，并将其作为字符串传递给template属性。这里使用了Node.js的fs模块来同步读取文件内容。

④启动服务

PS D:\Workspace2024\vsCodeVue\MrZhao01\zwd08zhang\vue-ssr> node server.js express server启动成功

⑤浏览器访问，看效果

访问http://localhost:8080	访问http://localhost:8080/hello
当前位置: /	当前位置: /hello