Das Vue-Framework ist ein äußerst beliebtes JavaScript-Frontend-Framework, das von Evan You entwickelt wurde und sich auf das Verständnis des reibungsloseren und effizienteren MVVM-Musters konzentriert. Sein Aufkommen ermöglicht Front-End-Entwicklern die einfachere Entwicklung von Webanwendungen mit einer guten Benutzererfahrung. In diesem Artikel werden die Server- und Client-Bereitstellungsmethoden des Vue-Frameworks vorgestellt, um den Lesern zu helfen, die Verwendungsfähigkeiten des Frameworks besser zu beherrschen.
1. Client-Bereitstellung
Sie müssen nur die Framework-Datei in die HTML-Datei einführen Methoden. Typ:
1. Verwenden Sie CDN zum Importieren:
Sie können die offizielle CDN-Adresse von Vue direkt verwenden, um die Vue.js-Datei in die HTML-Datei zu importieren, zum Beispiel:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./path/to/vue.js"></script>
package.json einführen, wobei Vue und Die Abhängigkeiten im Zusammenhang mit dem Vue-Server-Rendering sind wie folgt:
{
"dependencies": {
"vue": "^2.5.0",
"vue-server-renderer": "^2.5.0"
}
}package.json 文件中引入相关的依赖，其中Vue与Vue服务器渲染相关的依赖如下：const express = require('express')
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()
const app = express()
app.get('*', (req, res) => {
const vm = new Vue({
template: '<div>Hello {{ name }}</div>',
data: {
name: 'Vue SSR'
}
})
renderer.renderToString(vm, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>${html}</body>
</html>
`)
})
})
const port = process.env.PORT || 3000
app.listen(port, () => {
console.log(`Server started at localhost:${port}`)
})2.服务器端代码编写
接下来需要编写服务器端代码，在Node.js中使用 express 框架进行项目搭建，然后在项目中加入Vue服务器渲染中间件。例如：
module.exports = {
// ... 其他配置
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
}以上代码简单地实现了Vue SSR的基本功能，服务器启动后，访问页面时将返回Vue组件渲染后的页面内容。
可以看到，在代码中使用 vue-server-renderer 中的 createRenderer() 方法，创建了一个renderer对象，并将该对象作为模板参数传递给了 renderToString() 方法，负责将Vue组件渲染成HTML字符串，并将结果返回给前端页面。
3.配置Webpack
在项目中使用了Webpack，需要在Webpack配置文件中设置Vue文件的编译规则，例如：
const Vue = require('vue')
const express = require('express')
const renderer = require('vue-server-renderer').createRenderer()
const app = express()
app.get('*', (req, res) => {
const vm = new Vue({
template: `<div>Hello {{ name }}！</div>`,
data: {
name: 'Vue SSR'
}
})
renderer.renderToString(vm, (err, html) => {
if (err) {
return res.status(500).end('Internal Server Error')
}
res.end(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello</title>
</head>
<body>${html}</body>
</html>
`)
})
})
const port = process.env.PORT || 3000
app.listen(port, () => {
console.log(`Server started at localhost:${port}`)
})以上代码中使用了 vue-loader来Webpack处理 .vue 文件，主要是将 .vue 类型文件转换为可运行的 js 代码。
4.服务端渲染路由配置
在使用Vue SSR时，需要在项目中进行路由配置，以便正确地渲染路由请求的内容。例如：
rrreee以上代码使用了 express2. Serverseitiges Codeschreiben
Als nächstes müssen Sie serverseitigen Code mit schreiben express-Framework, um das Projekt zu erstellen, und fügen Sie dann die Vue-Server-Rendering-Middleware zum Projekt hinzu. Beispiel:
Der obige Code implementiert einfach die Grundfunktionen von Vue SSR. Nach dem Start des Servers wird der von der Vue-Komponente gerenderte Seiteninhalt zurückgegeben, wenn auf die Seite zugegriffen wird.
#🎜🎜#Sie können sehen, dass mit der MethodecreateRenderer() in vue-server-renderer im Code ein Renderer-Objekt erstellt wird und dieses Objekt wird als Vorlagenparameter an die Methode renderToString() übergeben, die dafür verantwortlich ist, die Vue-Komponente in einen HTML-String zu rendern und das Ergebnis an die Front-End-Seite zurückzugeben. #🎜🎜##🎜🎜#3. Webpack konfigurieren#🎜🎜##🎜🎜#Wenn Sie Webpack im Projekt verwenden, müssen Sie die Kompilierungsregeln der Vue-Datei in der Webpack-Konfigurationsdatei festlegen, zum Beispiel: #🎜 🎜#rrreee#🎜🎜 #Der obige Code verwendet vue-loader, um .vue-Dateien mit Webpack zu verarbeiten, hauptsächlich um Dateien vom Typ .vue zu konvertieren in ausführbaren JS-Code umwandeln. #🎜🎜##🎜🎜#4. Serverseitige Rendering-Routing-Konfiguration #🎜🎜##🎜🎜#Bei Verwendung von Vue SSR muss die Routing-Konfiguration im Projekt durchgeführt werden, um den Inhalt der Routing-Anfrage korrekt darzustellen. Zum Beispiel: #🎜🎜#rrreee#🎜🎜#Der obige Code verwendet das express-Framework, um das Routing zu konfigurieren, die gesamte Seite nach der Beurteilung der Routing-Anfrage zu rendern und sie an den Browser zurückzugeben. #🎜🎜##🎜🎜#Zusammenfassung#🎜🎜##🎜🎜#In diesem Artikel werden die grundlegenden Bereitstellungsmethoden von Vue-Server und -Client kurz vorgestellt. Bei der Entwicklung von Projekten müssen Sie die geeignete Bereitstellungsmethode auswählen. Für Projekte, die nur statische Seiten anzeigen müssen, verwenden Sie die Client-Bereitstellungsmethode. Für Projekte, die eine dynamische Anzeige von Daten oder SEO-Verbesserungen erfordern, wird die Verwendung einer serverseitigen Rendering-Bereitstellung empfohlen. Ich hoffe, dass dieser Artikel den Lesern hilfreich sein und es Ihnen ermöglichen kann, die Fähigkeiten im Umgang mit dem Vue-Framework besser zu beherrschen. #🎜🎜#Das obige ist der detaillierte Inhalt vonSprechen Sie über Server- und Client-Bereitstellungsmethoden im Vue-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
