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

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.

1. 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

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

cd my-ssr-app

2. 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

• 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文件中。

3. 修改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函数导出，在后面创建服务器脚本时会用到。

4. 创建服务器脚本
   在项目根目录下，我们需要创建一个服务器脚本。在项目根目录下创建一个名为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模版中，将最终结果返回给客户端。

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

npm run build
npm run serve

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

Ändern Sie die Vue-Eintragsdatei

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:

🎜rrreee🎜 in: 🎜rrreee🎜 Dann müssen wir die Funktion createApp exportieren, die später beim Erstellen des Serverskripts verwendet wird. 🎜
🎜Serverskript erstellen🎜Im Projektstammverzeichnis müssen wir ein Serverskript erstellen. Erstellen Sie eine Datei mit dem Namen server.js im Stammverzeichnis des Projekts. In dieser Datei müssen wir die relevanten Abhängigkeiten importieren und dann einen einfachen Server erstellen: 🎜🎜rrreee🎜Dieser Code implementiert einen einfachen Express-Server, der statische Dateien unter der Route /dist verfügbar macht, und Verwenden Sie für alle Routenanforderungen (*) die Methode createBundleRenderer von vue-ssr- Lesen Sie das Server-Bundle aus der Datei server-bundle.json , ordnen Sie den gerenderten HTML-Text einer einfachen HTML-Vorlage zu und geben Sie das Endergebnis an den Client zurück. 🎜
🎜Erstellen und starten Sie den Server🎜Führen Sie den folgenden Befehl im Terminal aus: 🎜🎜rrreee🎜Unter diesen ersetzt der Befehl npm run build den Befehl src -Verzeichnis Der folgende Code wird in das Server-Bundle und das Client-Bundle integriert, und die erstellten Ergebnisse werden im Verzeichnis dist gespeichert. Der Befehl npm run servo startet den Server und überwacht Port 3000. Geben Sie http://localhost:3000 in den Browser ein, um auf die SSR-gerenderte Seite zuzugreifen. 🎜🎜Zu diesem Zeitpunkt haben wir eine einfache Vue SSR-Rendering-Übung abgeschlossen. Natürlich gibt es viele spezifische Vorgänge und Details des SSR-Renderings, die ein tiefgreifendes Verständnis und Übung erfordern. Dieser Artikel bietet nur ein grundlegendes Einführungsbeispiel. Ich hoffe, dieser Artikel kann jedem helfen, das Vue SSR-Rendering zu meistern. 🎜

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!