前言
简单说，如果你的服务器不是Node.js，而是Nginx，那么你怎么使用Vue官方的SSR呢？似乎是没办法了。既然服务器不能预渲染，那么现在.html文件渲染好，再传到服务器，不是一样可以解决这个问题么。
方案
我采取的方案是使用Prerender SPA Plugin。
官网：https://www.npmjs.com/package/prerender-spa-plugin
原理
安装Prerender SPA Plugin的过程中会安装Puppeteer，这个包是Chrome开发团队在2017年发布的一个Node.js包，用来模拟Chrome浏览器的运行。
Prerender SPA Plugin利用这个包打开项目首页，然后取出其中的HTML骨架，因为有些内容可能需要ajax，所以会是空的。将骨架取出之后，填入到dist/index.html中，就可以生成渲染好的首页了，这也就实现了首屏（其实是首页）预渲染。
适用范围
打算做SEO，当然可以，只是动态内容还是不会预渲染的，只能是一些about页面适合预渲染。
打算做首屏预加载的话，也需要先研究一下，如果你的首页首屏的内容都是ajax来的，那么采用本方案的这种预加载并没有太大意义，因为即便DOM节点先渲染，而动态文字和动态图片都需要另外ajax，这种延迟并不是预渲染能解决的。所以，只有当首页首屏主要内容都是固定文字和固定图片，才适合采用本方案。
另外，如果你原本的页面呈现逻辑是ajax完成才让页面show，那么也不要做预渲染，因为也没有太大意义，毕竟用户等待ajax就已经是最长的延迟了。
安装
yarn add prerender-spa-plugin
配置
在vue.config.js中加入：
const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.plugins.push(
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
outputDir: path.join(__dirname, 'prerendered'),
indexPath: path.join(__dirname, 'dist', 'index.html'),
routes: ['/'],
renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
headless: true,
})
})
)
}
},
prerendered是根目录自动创建的新目录，将来会存入一个写入了骨架的index.html。
routes: ['/'],的数组里就是路由path，一般就是'/'就可以了。注意，如果你打算SEO，就可以再加入其它的以文字为主的页面。
headless: true,表示不弹出Puppeteer，调试过程中可以改成false，可以看到是否正常打开了你想要预渲染的页面。
使用
照常yarn build。
从
prerendered文件夹找到index.html传到服务器，替换原本的index.html即可。
出错
项目简单的话，这个方案是没有问题的，如果有问题，建议另想办法。
