Hervorragende Vue-Praxis – Implementierung des SSR-Renderings von 0 auf 1-View.js-php.cn

Hervorragende Vue-Praxis – Implementierung des SSR-Renderings von 0 auf 1

WBOY

Freigeben： 2023-06-09 16:14:04

Original

1152 Leute haben es durchsucht

In der Webentwicklung ist SSR-Rendering (Server Side Rendering) eine sehr wichtige Technologie. Es kann das anfängliche Rendern der Seite auf dem Server abschließen und dann die gerenderte HTML-Datei zur Anzeige an den Client übergeben. Im Vergleich zum herkömmlichen clientseitigen Rendering (CSR) kann das SSR-Rendering die Ladegeschwindigkeit von Webseiten auf dem ersten Bildschirm, die Suchmaschinenoptimierungsfunktionen usw. verbessern. In diesem Artikel wird erläutert, wie Sie das SSR-Rendering über das Vue-Framework implementieren.

Vue-Projekt erstellen
Zuerst müssen wir ein grundlegendes Vue-Projekt erstellen. Führen Sie den folgenden Befehl im Terminal aus:

vue create my-ssr-app

Nach dem Login kopieren

Mit diesem Befehl können wir schnell ein Vue-Basisprojekt erstellen und dann über den Befehl in das Projektverzeichnis gelangen:

cd my-ssr-app

Nach dem Login kopieren

SSR-Abhängigkeiten hinzufügen
Als nächstes müssen wir SSR hinzufügen -bezogene Abhängigkeiten. Geben Sie im Terminal die folgenden Befehle ein:

npm install --save vue vue-server-renderer express

Nach dem Login kopieren

vue: eine Abhängigkeit des Vue-Frameworks selbst.
vue-server-renderer: SSR-Renderer für Vue.
express: Ein Webanwendungs-Framework basierend auf Node.js.

Der obige Befehl installiert automatisch Abhängigkeiten in der Datei package.json des Projekts. package.json文件中。

修改Vue入口文件
在src目录下，我们可以找到main.js文件，这是Vue框架的入口文件。我们需要进行修改，以支持SSR渲染。首先，我们需要将Vue的实例转变为一个工厂函数，这样在SSR时，可以为每个请求创建一个新的实例。将原本的：

new Vue({
  render: h => h(App),
}).$mount('#app')

Nach dem Login kopieren

修改为：

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

Nach dem Login kopieren

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

创建服务器脚本
在项目根目录下，我们需要创建一个服务器脚本。在项目根目录下创建一个名为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')
})

Nach dem Login kopieren

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

进行构建并启动服务器
在终端运行以下命令：

npm run build
npm run serve

Nach dem Login kopieren

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

Im Verzeichnis src finden wir die Datei main.js, die die Eintragsdatei von ist das Vue-Framework. Wir müssen Änderungen vornehmen, um das SSR-Rendering zu unterstützen. Zuerst müssen wir die Vue-Instanz in eine Factory-Funktion umwandeln, damit für jede Anfrage während des SSR eine neue Instanz erstellt werden kann. Ändern Sie das Original:

createApp

server.js

/dist

*

createBundleRenderer

vue-ssr- Lesen Sie das Server-Bundle aus der Datei server-bundle.json

npm run build

src

dist

npm run servo

http://localhost:3000

Das obige ist der detaillierte Inhalt vonHervorragende Vue-Praxis – Implementierung des SSR-Renderings von 0 auf 1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!