本文主要用于记录在单页面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等属性的页面进行如下设置