vue服务端渲染操作简单入门实例分析

本文将为你深入浅出地Vue服务端渲染操作。对于那些熟悉Vue并有一定项目经验的开发者来说，服务端渲染是为了解决首屏渲染白屏问题以及提高SEO友好性的一种手段。

我们来通过一个简单的实例来了解Vue服务端渲染是如何实现的。创建一个新的项目目录，通过npm init初始化生成package.json文件。接着，创建server.js文件，并参考Vue官方提供的教程中的代码进行编写。

代码示例如下：

```javascript

const Vue = require('vue')

const express = require('express')() // 使用express构建服务器

const renderer = require('vue-server-renderer').createRenderer() // 创建渲染器实例

// 服务器获取到请求时执行的操作

express.get('', (req, res) => {

const app = new Vue({ // 创建Vue实例

data: {

url: req.url // 将请求的URL作为数据传递给Vue实例

},

template: `

` // 定义模板，展示URL数据

})

renderer.renderToString(app, (err, html) => { // 将Vue实例渲染为字符串形式的HTML代码

if (err) { // 如果出现错误，返回服务器错误提示

res.status(500).end('Internal Server Error')

return

}

res.end(`

`)

})

})

express.listen(8080) // 启动服务器，监听端口号8080

Vue服务端渲染的奥秘，一起揭开其神秘面纱。这是一段结合了Vue和Express的示例代码，让我们逐步解读。

假设我们有一个`server.js`文件，它引入了Vue、Express以及用于服务端渲染的`vue-server-renderer`。我们的模板文件`index.template.html`定义了Vue注入的位置。

`server.js`的内容大致如下：

```javascript

const Vue = require('vue');

const express = require('express');

const renderer = require('vue-server-renderer').createRenderer({

template: require('fs').readFileSync('./index.template.html', 'utf-8')

});

const app = express();

app.get('', (req, res) => {

const context = {

title: 'Hello World', // 可以根据需求动态设置标题

// 这里可以加入更多的meta信息或其他数据

url: req.url

};

const appInstance = new Vue({

data: context, // 将上下文数据传递给Vue实例

template: `

` // 这里只是一个简单的示例模板

});

renderer.renderToString(appInstance, (err, html) => {

if (err) {

res.status(500).end('Internal Server Error');

return;

}

res.end(html); // 将渲染后的HTML字符串发送给客户端

});

});

app.listen(8080); // 在8080端口启动服务器

```

与此我们的`index.template.html`文件定义了Vue组件注入的位置以及一些基础的HTML结构：

```html

```

在Vue.js服务端渲染的过程中，我们遇到了两条主要线路。第一条是在server.js外部创建app.js，但发现无法成功引入至server中。这并不是我们关注的重点。另一条线路则是使用vue-loader创建一个Vue实例，然后将其引入至server中。整个Vue渲染过程都在解决如何正确引入、如何处理与前端混合的问题。针对狼蚁网站的SEO优化，这里有一个简单案例的实现代码。

由于不能直接应用.vue文件和外部的js文件，我们需要借助Webpack的力量。Webpack能将Vue实例转译为Node.js可用的代码，同时对前端代码进行转译。接下来，我们以vue init webpack-simple vuessr0为基础的vue-ssr案例展开讲解。

我们使用vue-cli即Vue脚手架建立了一个简单模板。命令为vue init webpack-simple vuessr0。建立后的文件结构如下，相信对此大家已经比较熟悉。

在此基础上，我们进行了一些改造，创建了app.js、entry-client.js、entry-server.js文件，并创建了build目录。同时删除了自动生成的webpack.config.js文件。改造后的目录结构清晰有序。

其中，entry-server.js的作用是将Vue实例转译为Node.js可用代码。而entry-client.js则与传统前端处理方式一致。

接下来是GitHub链接，地址为[

安装依赖后，按照顺序执行以下命令：

npm run build:client

npm run build:server

npm run dev

在8080端口访问即可。本文只是对Vue服务端官网最简单实例的实现，未使用vue-router、vuex，也没有涉及服务端数据请求。希望能对正在学习Vue服务端的小伙伴有所帮助。如有错误，请不吝指出。

我们通过Cambrian的渲染方法将'body'进行渲染。这只是一个简单的案例，更多的高级应用和细节优化还需要进一步和实践。