vue服务端渲染用什么技术 • Worktile社区

fiy

Worktile&PingCode市场小伙伴

Vue服务端渲染（Vue Server Side Rendering，简称SSR）使用的技术主要有以下几种：

Vue.js：Vue.js是一款流行的JavaScript框架，用于构建用户界面。它通过组件化的开发方式，可以将页面拆分为多个可复用的组件，方便开发和维护。
Node.js：Node.js是基于Chrome V8引擎的JavaScript运行环境，可以在服务器端运行JavaScript代码。在Vue SSR中，Node.js扮演了非常重要的角色，它负责处理客户端发出的请求，并在服务器上进行渲染。
Vue Server Renderer：Vue Server Renderer（Vue SSR的渲染器）是Vue官方提供的一款渲染器，用于在服务器端渲染Vue.js应用。它将Vue组件转换为HTML字符串，并在服务器上进行预渲染，然后将渲染得到的HTML字符串发送给客户端。
Webpack：Webpack是一个模块打包工具，可以将多个模块打包成一个或多个静态资源文件。在Vue SSR中，Webpack用于将Vue组件及其相关的资源打包成可在服务器端运行的JavaScript文件。
Express.js：Express.js是一个基于Node.js平台的Web应用开发框架，可以用来构建服务器端应用。在Vue SSR中，Express.js用于处理服务器端的路由和请求处理。

综上所述，Vue服务端渲染使用了Vue.js、Node.js、Vue Server Renderer、Webpack和Express.js等技术。通过这些技术的结合，可以实现在服务器端渲染Vue.js应用，提高网页的性能和用户体验。

1年前 0条评论

worktile

Worktile官方账号

Vue服务端渲染（SSR）使用了一系列的技术来实现。下面是五个常用的技术：

Node.js：Node.js是一个基于Chrome V8 JavaScript引擎构建的JavaScript运行环境，可以作为服务器端的运行环境。Vue SSR需要在服务器端执行JavaScript代码来生成HTML，而Node.js正好可以提供这个功能。
Vue.js：Vue.js 是一款用于构建用户界面的渐进式JavaScript框架。它不仅可以在浏览器端运行，还可以在服务器端运行，并且具有非常好的渲染性能。Vue.js的模板语法和组件化开发模式使得在服务器端渲染Vue应用变得更加容易。
Vue Router：Vue Router 是Vue.js官方的路由管理器。在SSR中，Vue Router用于处理服务器端和客户端之间的路由匹配和跳转。它可以根据当前的URL路径来动态地渲染对应的组件，并且在服务器端渲染期间将相应的组件状态预加载到HTML中，以提高渲染性能。
Webpack：Webpack 是一个模块打包工具，用于将各种类型的文件(如JavaScript、CSS、图片等)转换成可在浏览器中运行的静态资源。在SSR中，Webpack通常用于打包和构建服务器端的JavaScript代码。它可以将Vue组件、CSS样式等资源转换为服务器端可以运行的代码，并且支持代码分割和按需加载，以提升服务器端渲染的性能。
Babel：Babel 是一个用于将ES6+代码转换为向后兼容版本的JavaScript代码的工具。在SSR中，Babel通常用于将使用最新的JavaScript语法编写的Vue组件和服务器端代码转换为可以在目标服务器上执行的代码。这样，即使服务器上的Node.js环境不支持最新的JavaScript语法，也可以正常地运行SSR应用。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

Vue服务端渲染（Vue Server Rendering，简称SSR）是指在服务器端将Vue组件渲染成HTML字符串，然后将其发送到客户端进行展示的一种技术。SSR能够提供更好的首次加载性能和搜索引擎优化（SEO），适用于需要对SEO友好的网站或应用。

Vue提供了官方的SSR解决方案，使用Node.js作为服务器端运行环境，并采用Vue提供的SSR相关模块进行处理。下面是使用Vue官方SSR解决方案进行开发的步骤和具体操作：

创建Vue项目

首先，使用Vue CLI创建一个新的Vue项目。在创建项目时，选择要使用的特性中包含Server-side rendering（SSR）。

修改项目配置

在创建项目后，需要对项目进行一些配置。首先，打开package.json文件，添加一个build命令，用于构建服务器端代码。该命令将会执行vue-cli-service build命令，并设置其mode为server。

"scripts": {
  "build": "vue-cli-service build --mode server"
}

然后，在根目录下创建vue.config.js文件，并添加以下内容：

module.exports = {
  pluginOptions: {
    ssr: {
      serverEntry: 'src/entry-server.js',
      clientEntry: 'src/entry-client.js',
      template: 'public/index.html'
    }
  }
}

这里使用了Vue CLI的插件配置功能，指定了服务器端入口文件、客户端入口文件以及HTML模板文件。

创建服务器端和客户端入口文件

在src目录下创建entry-server.js和entry-client.js文件。entry-server.js的作用是创建服务器端Vue实例，并将其渲染为HTML字符串，然后将HTML字符串发送给客户端。

import { createApp } from './app'

export default context => {
  return new Promise((resolve, reject) => {
    const { app, router } = createApp()

    router.push(context.url)

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()

      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }

      Promise.all(matchedComponents.map(component => {
        if (component.asyncData) {
          return component.asyncData({ store, route: router.currentRoute })
        }
      })).then(() => {
        context.state = store.state
        resolve(app)
      }).catch(reject)
    }, reject)
  })
}

entry-client.js的作用是在客户端重新创建Vue实例，并将其挂载到客户端DOM上。

import { createApp } from './app'

const { app, router } = createApp()

router.onReady(() => {
  app.$mount('#app')
})

这里使用了createApp工厂函数来创建Vue实例和路由实例，并将其导出。

创建服务器端脚本

在根目录下创建一个server.js文件。该文件的作用是使用Express（或其他Node.js的服务器框架）来创建一个服务器，并处理服务器端渲染请求。

const fs = require('fs')
const path = require('path')
const express = require('express')
const { createBundleRenderer } = require('vue-server-renderer')

const server = express()

const renderer = createBundleRenderer(
  fs.readFileSync(path.resolve(__dirname, 'dist/server/vue-ssr-server-bundle.json')), {
    template: fs.readFileSync(path.resolve(__dirname, 'dist/server/index.ssr.html')),
    clientManifest: JSON.parse(fs.readFileSync(path.resolve(__dirname, 'dist/client/vue-ssr-client-manifest.json')))
  }
)

server.get('*', (req, res) => {
  const context = {
    url: req.url
  }

  renderer.renderToString(context, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }

    res.end(html)
  })
})

server.listen(8080)

这里使用了vue-server-renderer模块的createBundleRenderer方法来创建渲染器，同时读取了打包生成的服务器端渲染资源和客户端渲染资源。

打包项目

运行npm run build命令来打包Vue项目。Vue CLI将会生成客户端和服务器端各自的打包文件，并生成相应的映射关系。

运行服务器端脚本

运行node server.js命令，在本地启动服务器端，监听8080端口，然后可以访问http://localhost:8080来查看服务器端渲染的效果。

以上就是使用Vue官方的SSR解决方案进行服务端渲染的基本步骤和操作流程。当然，具体的SSR实现还涉及到很多细节和调优，这里只是简单介绍了整个过程。如果想要深入了解更多关于Vue SSR的知识和技术细节，建议查阅Vue官方文档以及相关的实战案例。

1年前 0条评论