本文阐述了vue服务器的渲染操作。分享给大家参考，如下：

想要学习vue-ssr的学生必须熟悉vue，或多或少做过几个项目。那么学习vue服务器渲染只解决了第一次屏幕渲染的白屏问题，是SEO友好的。

话不多说，作者也研究了很多天才弄清楚服务器上的渲染是否杂！

首先，实现官网的基本案例

随意创建一个目录，然后执行npm init初始化项目，生成项目文件package.json；创建server.js；然后根据https://ssr.vuejs.org/zh/basic.html教程中介绍的vue-ssr: server.js的官方链接复制教程中的代码，如下所示

const Vue=require(' Vue ')const server=require(' express ')()const renderer=require(' Vue-server-renderer ')。createRenderer()server.get('* '，(req，Res)={ const app=new vue({ data : { url : req . URL }，template3360` div访问的URL是：{{url}}/div`}) renderer。rendertostring (app，(err，html)={ if (err) { res.status(500))。end('内部服务器错误')返回} res.end(`！doctype html lang=' en ' head title hello/title/head body $ { html }/body/html `)})server . listen(8080)显然需要依赖上面介绍的vue、express和vue-server-renderer。安装完成后，在终端执行，node server.js，打开浏览器，http://localhost33608080/，会出现乱码，不出意外，因为官网返回的html字符串中没有metacarset=' utf-8 '，但是加上这个就可以了。

当然也可以引入一个模板文件，官网也是这样。此时，server.js是

const Vue=require(' Vue ')const server=require(' express ')()const renderer=require(' Vue-server-renderer ')。create renderer({ template : require(' fs ')。readFileSync('。/index.template.html '，' utf-8')})server.get('* '，(req，Res)={ const app=new vue({ data : { url : req . URL }，template3360` div访问的URL是：{{url}}/div`})渲染器。rendertostring (app，(err，Html)={if (err) {res.status (500))。end('内部服务器错误')返回} RES . end(html)})})server . listen(8080)模板文件index.template.html

！DOCTYPE html html lang=' en ' head title hello/title/head body！-下面的纸条一定有-！-vue-SSR-outlet-/body/html以上注为根据官网教程vue注射的位置标记。然后做同样的事情，node server.js就可以了。

很简单吗？您还可以创建一个对象来更改模板的标题和元。此时server.js和模板文件的代码是

const Vue=require(' Vue ')const server=require(' express ')()const renderer=require(' Vue-server-renderer ')。create renderer({ template : require(' fs ')。readFileSync('。/index.template.html '，' utf-8')})server.get('* '，(req，RES)={ const context={ title : ' hello '，meta: ` meta.自指的.`，URL : req . URL } const app=new vue({ data : { URL 3360 req . URL }，template3360 ` div访问的URL为：{ { URL } }/div `})render . render tostring(app，context，(err，html)={ if (err) { res.status(500)。end('内部服务器错误')返回} RES . end(html)})} Server . listen(8080)！DOCTYPE html html lang=' en ' head title { { title } }/title { { { meta } } }/head body！-下面的纸条一定有-！-vue-SSR-outlet-/body/html在这里，我理解vue服务器端渲染其实就是一组代码的两个应用，所谓的一组代码就是把server.js外部的vm实例取出来，上面说的很简单，因为一旦把server内部创建的vm实例取出来，引入到server.js外部，就会比较麻烦。

这里有两行，一行是创建app . js；在server.js之外；结果是无法引入服务器；而这并不是关注的焦点；

另一行是使用vue-loader创建一个vm实例，然后将其引入服务器。整个vue渲染就是为了解决这个问题，解决引入的问题，解决引入后与前端混用的问题。在下面发布一个简单案例的实现代码。

因为。vue文件和外部js文件不能直接应用，需要借助webpack将vue实例翻译成节点可用代码并翻译前端代码。

第二，基于vue init webpack-simple vuessr0的vue-ssr案例

1)用vue-cli构建了一个简单的模板，即vue scaffold，命令为：vue init webpack-simple vuessr0，相信大家都很熟悉。建成后的结构如下

转换后，创建几个文件app.js，entry-client.js，entry-server.js，创建构建目录，删除自动生成的webpack.config.js文件，将目录结构改为

每个文件的函数entry-server.js将vm实例翻译成节点的可用代码；

Entry-client.js与传统的前端处理保持一致。

好的，github链接地址是：https://github.com/mstzhen/vue-ssr;我真的有点懒。

需要注意的是，webpack将一个文件打包成两个，前端入口文件用于挂载在id上，而后端入口文件和后端文件负责注入。

首先安装依赖项：npminstall；

然后依次

您可以访问NPM运行构建：客户端NPM运行构建：服务器NPM运行开发8080端口。

最后，本文只实现了vue服务器官网最简单的例子。没有vue路由器，没有vuex，也没有服务器数据请求。希望对正在学习vue服务器的小伙伴有所帮助。

请指出错误。