prerender-spa-plugin 与 vue-meta-info
前端vue等框架打包的项目一般为SPA应用,而单页面是不利于SEO的,现在的解决方案有两种:
1、SSR服务器渲染
了解服务器渲染请进,这里不做记录。
2、预渲染模式
这比服务端渲染要简单很多,而且可以配合 vue-meta-info 来生成title和meta标签,基本可以满足SEO的需求
TIPS: 使用预渲染vue-router必须使用history模式
安装prerender-spa-plugin
// 安装 npm install prerender-spa-plugin --save
然后在webpack.prod.conf.js里面添加:
// 头部引入
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
在plugins里面添加:
// 配置PrerenderSPAPlugin
new PrerenderSPAPlugin({
// 生成文件的路径,也可以与webpakc打包的一致。
staticDir: path.join(__dirname, '../dist'),