首页  >  文章  >  web前端  >  Vue优秀实践——从0到1实现SSR渲染

Vue优秀实践——从0到1实现SSR渲染

WBOY
WBOY原创
2023-06-09 16:14:041192浏览

在Web开发中,SSR渲染(Server Side Rendering)是一项非常关键的技术。它可以将页面的初始渲染工作在服务器上完成,然后将渲染好的HTML文件传递给客户端展示。相比于传统的客户端渲染(CSR),SSR渲染可以提高网页的首屏加载速度、搜索引擎优化能力等。本文将介绍如何通过Vue框架来实现SSR渲染。

  1. 创建Vue项目
    首先,我们需要创建一个基础的Vue项目。在终端运行以下命令:
vue create my-ssr-app

通过该命令,我们可以快速创建一个Vue的基础项目,然后通过命令进入项目目录:

cd my-ssr-app
  1. 添加SSR依赖
    接下来,我们需要添加SSR相关的依赖。在终端依次输入以下命令:
npm install --save vue vue-server-renderer express
  • vue:Vue框架本身的依赖。
  • vue-server-renderer:Vue的SSR渲染器。
  • express:一个基于Node.js的Web应用框架。

上述命令会自动将依赖安装到项目的package.json文件中。

  1. 修改Vue入口文件
    src目录下,我们可以找到main.js文件,这是Vue框架的入口文件。我们需要进行修改,以支持SSR渲染。首先,我们需要将Vue的实例转变为一个工厂函数,这样在SSR时,可以为每个请求创建一个新的实例。将原本的:
new Vue({
  render: h => h(App),
}).$mount('#app')

修改为:

export function createApp() {
  return new Vue({
    render: h => h(App)
  })
}

然后,我们需要将createApp函数导出,在后面创建服务器脚本时会用到。

  1. 创建服务器脚本
    在项目根目录下,我们需要创建一个服务器脚本。在项目根目录下创建一个名为server.js的文件。在该文件中,我们需要导入相关的依赖,然后创建一个简单的服务器:
const express = require('express')
const server = express()
const { createBundleRenderer } = require('vue-server-renderer')
const renderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'))
const template = require('fs').readFileSync('./index.html', 'utf-8')

server.use('/dist', express.static('./dist'))

server.get('*', (req, res) => {
  const context = { url: req.url }
  renderer.renderToString(context, (err, html) => {
    if (err) {
      console.error(err)
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(template.replace('<div id="app"></div>', `<div id="app">${html}</div>`))
  })
})

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000')
})

这段代码实现了一个简单的Express服务器,它会将./dist目录下的静态文件暴露在/dist路由下,并且对于所有路由请求(*),使用createBundleRenderer方法从vue-ssr-server-bundle.json文件中读取server bundle,并且将渲染后的HTML文本映射到一个基础的HTML模版中,将最终结果返回给客户端。

  1. 进行构建并启动服务器
    在终端运行以下命令:
npm run build
npm run serve

其中,npm run build命令会将src目录下的代码构建为server bundle和client bundle,并且将构建后的结果存放在dist目录下。npm run serve命令会启动服务器并监听3000端口。在浏览器中输入http://localhost:3000即可访问SSR渲染后的页面。

到这里,我们就完成了一个简单的Vue SSR渲染的实践。当然,SSR渲染还有很多具体操作和细节需要我们深入了解和实践,本文只是提供了一个基础的入门示例。希望本文能够对大家掌握Vue SSR渲染有所帮助。

以上是Vue优秀实践——从0到1实现SSR渲染的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn