spa项目使用插件做预渲染

需求出发点：
项目需要做SEO优化

当前情况：
项目是vue-cli搭建的spa(单页面渲染应用)，即页面查看源代码只有<div id="app"></div>
spa对SEO搜索引擎爬取非常不友好，因此需要用到预渲染，将需要做SEO的重点页面进行预渲染

使用工具：
prerender-spa-plugin

使用方式：

1. npm i  prerender-spa-plugin -D

2. vue.config.js中添加

   const PrerenderSPAPlugin = require('prerender-spa-plugin') module.exports = { ... configureWebpack: { plugins: [ new PrerenderSPAPlugin({ // Required - The path to the webpack-outputted app to prerender. staticDir: path.join(__dirname, 'dist'), // Required - Routes to render. routes: [ '/' ], }) ] } }

   3. 执行 npm install，重新安装依赖（这一步可视情况，我这里执行完前两步之后，run serve的时候某个依赖包中报错了，可能是node版本的修改原因，也可能是和安装的插件有版本不兼容的问题，如果本地执行完前两步，起服务的时候报错，可以尝试使用此步）

执行完整个流程之后，直接npm run build进行打包。测试的话，可以放到本地nginx上进行测试。

页面使用快捷键 ctrl+U查看源代码，已经是预渲染后的页面，页面中不只有一个简单的 <div id="app"></div> 了