vue spa预渲染

本文主要用于记录在单页面SEO优化中遇到的问题

技术栈：vue-cli  webpack  vue-meta-info  prerender-spa-plugin

---

prerender-spa-plugin：通过puppeteer爬取网页内容，输出成HTML文件保存在本地

1.引入prerender-spa-plugin，此过程可能会遇到puppeteer安装失败，可改用cnpm淘宝镜像安装；在webpack的配置文件中导入此插件（因为预渲染在打包成功之前）

2.在webpackConfig的plugins中配置需要生成预渲染的页面

3.在config文件夹的index.js中根据情况更改路径

4.在main.js中加上下面代码（存疑？？）

5.npm run build生成的dist文件中包含需要预渲染的路径的html文件

---

vue-meta-info：npm安装插件，在mian.js中导入挂载

在需要设置keywords等属性的页面进行如下设置