初学vue服务端渲染疑惑非常多，我们大部分前端都是半路出家，上手都是前后端分离，对服务端并不了解，不说java、php语言了，连node服务都还没搞明白，理解服务端渲染还是有些困难的；
网上有非常多的vue服务渲染的入门案例，但看了很久，很多，还是一头雾水，搞不明白这些文件和关键字的联系和意思：
server.js
entrt-client.js
server-js
built-server-bundle.js
vue-ssr-server-bundle.json
vue-ssrclientmanifest.json
createBundleRenderer
clientManifest
这篇内容会按照 基础服务端渲染--vue实例渲染--加入vueRouter--加入vueX的顺序入坑，后续应该还有--开发模式--seo优化--部分渲染，这里先不挖那么多坑了；
>基础服务端渲染
顾名思义，得启个服务：(建个新项目，不要用vue-cli)
//server.js const express = require('express'); const chalk = require('chalk');//加个chalk就是console好看点。。 const server = express(); server.get('*', (req, res) => { res.set('content-type', "text/html"); res.end(` <!DOCTYPE html> <html lang="en"> <head><title>Hello</title></head> <body>你好</body> </html> `) }) server.listen(8080,function(){ let ip = getIPAdress(); console.log(`服务器开在：${chalk.green(ip)}:${chalk.yellow(8080)}`) }) function getIPAdress(){//node下的os模块可以拿到启动该文件的服务端的部分信息 var interfaces = require('os').networkInterfaces(); for (var devName in interfaces) { var iface = interfaces[devName]; for (var i = 0; i < iface.length; i++) { var alias = iface[i]; if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) { return alias.address; } } } }
启动 node server.js
再看页面 正常，这就是最基础的服务端渲染
其实就是一个get请求，返回一个字符串，浏览器默认展示返回结果；
然而对于这个字符串的解析还不明确，什么意思，比如：
去掉这句话，页面就成了这样，原因不深究，自己百度
>加入vue实例
跳过官网说的built-server-bundle.js应用，意思就是不用管这个文件了，只是一个过渡文件，项目中也不会用到。直接使用createBundleRenderer方法，直接用vue-ssr-server-bundle.json；
看下现在的目录结构：
新增了5个文件；有关客户端的配置entry-client.js不是必须的，这里先不管；
app.js是用来创建vue实例的；
entry-server.js是用来创建生成vue-ssr-server-bundle.json（需要用到app.js）所需的配置配件；是给webpack.server.config.js用的；
webpack.server.config.js是用来生成vue-ssr-server-bundle.json的；
vue-ssr-server-bundle.json是给server.js中的createBundleRenderer用的。
//app.js import Vue from 'vue' import Vue from './App.vue'//这里一定要写上.vue,不然会匹配到app.js,require不区分大小写0.0 export default createApp=function(){ return new Vue({ render:h => h(App) }) }
一个createApp生成一个vue实例；
//App.vue <template> <div> 这是个app </div> </template> <script> export default {} </script>
还没用到<router-view>
//weback-base.config.js const path = require('path') const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { output:{ path:path.resolve(__dirname,'./dist'), filename:'build.js', }, module: { rules: [ { test:/\.js$/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } }, exclude:[/node_modules/,/assets/] }, { test:/\.vue$/, use:['vue-loader'] } ] }, resolve: { alias:{ '@':path.resolve(__dirname,'../') }, extensions:['.js','.vue','.json'] }, plugins:[ new VueLoaderPlugin() ] }
有关webpack配置不啰嗦