随着前端技术的不断发展，单页面应用（SPA）已成为主流。但是 SPA 存在一些问题，如 SEO 不友好、首屏加载时间长等。为了解决这些问题，服务器端渲染（SSR）成为了一种解决方案。
Vue.js 是一个流行的前端框架，提供了服务器端渲染的支持。本文将介绍如何使用 Vue.js 和 Webpack 实现服务器端渲染，并提供示例代码和指导意义。
什么是服务器端渲染？
服务器端渲染是指在服务器端生成 HTML，将其发送到客户端浏览器，而不是在客户端浏览器中使用 JavaScript 生成 HTML。这种方式可以提高首屏加载速度，提高 SEO 友好性。
Vue.js 服务器端渲染
Vue.js 提供了服务器端渲染的支持。使用服务器端渲染，可以在服务器端生成 HTML，然后将其发送到客户端浏览器。这样可以提高首屏加载速度，提高 SEO 友好性。
Vue.js 服务器端渲染的原理是将 Vue 组件转换为字符串，并在服务器端生成 HTML。在客户端浏览器中，Vue.js 将这些字符串转换为 DOM，然后挂载到页面上。
Webpack
Webpack 是一个模块打包工具，可以将多个 JavaScript 文件打包成一个文件。Webpack 还支持加载 CSS、图片等资源，并可以使用插件扩展功能。
Webpack 还提供了服务器端渲染的支持，可以将 Vue 组件打包成服务器端可用的代码。
实战：使用 Vue.js 和 Webpack 实现服务器端渲染
本节将介绍如何使用 Vue.js 和 Webpack 实现服务器端渲染。我们将使用 Vue.js 官方提供的 starter kit 作为基础，然后添加服务器端渲染的支持。
步骤 1：创建项目
首先，我们需要创建一个新的 Vue.js 项目。可以使用 Vue CLI 快速创建项目，也可以手动创建项目。
使用 Vue CLI 创建项目的命令如下：
vue create my-project
手动创建项目的步骤如下：
创建一个新的目录，例如
my-project。在
my-project目录中创建package.json文件，内容如下：
{
"name": "my-project",
"version": "1.0.0",
"dependencies": {
"vue": "^2.6.11"
}
}- 在
my-project目录中创建index.html文件，内容如下：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Project</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>- 在
my-project目录中创建src目录，并在其中创建main.js文件，内容如下：
// javascriptcn.com 代码示例
import Vue from 'vue'
new Vue({
el: '#app',
template: '<div>Hello, {{ name }}!</div>',
data: {
name: 'World'
}
})步骤 2：添加 Webpack 配置
接下来，我们需要添加 Webpack 配置。我们将使用 Vue.js 官方提供的 starter kit 的 Webpack 配置作为基础，然后添加服务器端渲染的支持。
- 在
my-project目录中创建webpack.config.js文件，内容如下：
// javascriptcn.com 代码示例
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './index.html'
})
]
}- 安装必要的依赖：
npm install --save-dev webpack webpack-cli webpack-dev-server vue-loader vue-template-compiler babel-loader @babel/core @babel/preset-env css-loader vue-style-loader html-webpack-plugin
步骤 3：添加服务器端渲染支持
接下来，我们需要添加服务器端渲染的支持。我们将使用 Vue.js 官方提供的服务器端渲染插件。
- 安装必要的依赖：
npm install --save vue-server-renderer express
- 在
my-project目录中创建server.js文件，内容如下：
// javascriptcn.com 代码示例
const express = require('express')
const Vue = require('vue')
const serverRenderer = require('vue-server-renderer').createRenderer()
const app = express()
app.get('*', (req, res) => {
const vm = new Vue({
template: '<div>Hello, {{ name }}!</div>',
data: {
name: 'World'
}
})
serverRenderer.renderToString(vm, (err, html) => {
if (err) {
res.status(500).send('Internal Server Error')
return
}
res.send(`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Project</title>
</head>
<body>
${html}
<script src="./dist/bundle.js"></script>
</body>
</html>
`)
})
})
app.listen(3000, () => {
console.log('Server is running at http://localhost:3000')
})- 在
package.json文件中添加以下内容：
"scripts": {
"dev": "webpack-dev-server --open",
"build": "webpack",
"start": "node server.js"
}步骤 4：运行项目
现在，我们已经完成了服务器端渲染的支持。可以使用以下命令运行项目：
npm run build npm start
然后在浏览器中访问 http://localhost:3000，即可看到服务器端渲染的页面。
总结
本文介绍了如何使用 Vue.js 和 Webpack 实现服务器端渲染。服务器端渲染可以提高首屏加载速度，提高 SEO 友好性。Vue.js 提供了服务器端渲染的支持，使用 Webpack 可以将 Vue 组件打包成服务器端可用的代码。本文提供了详细的步骤和示例代码，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657bcb4ad2f5e1655d676dd2