目前项目需要进行seo优化,调研了一下prerender预渲染,简述一下配置和不足
预渲染:
构建阶段生成匹配预渲染路径的 html 文件(注意:每个需要预渲染的路由都有一个对应的 html)。构建出来的 html 文件已经有静态数据,需要ajax数据的部分未构建。
如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要预渲染。
配置
vue add prerender-spa
根据提示配置即可
? Which routes to pre-render? (list them separated by a comma) /,/about,/contact
/,/about,/contact是你要预渲染的router
你可以按自己的写,要什么界面变成静态的就写哪个界面的路由,逗号隔开。
? Use a render event to trigger the snapshot? Yes
? Use a headless browser to render the application? (recommended) Yes
? Only use prerendering for production builds? (recommended) Yes
上面三个都可以写yes
之后再vue.config.js中就会多出几行代码
pluginOptions: {
prerenderSpa: {
registry: undefined,
renderRoutes: [
'/',
'/about',
'/contact',
],
useRenderEvent: true,
headless: true,
onlyProduction: true
}
}
- 手动配置
npm install prerender-spa-plugin puppeteer
途中需要安装chrome,一般是装不上的
更改npm源npm config set registry https://registry.npm.taobao.org
之后再次安装,成功 - 在vue.config.js中的configureWebpack中添加配置
config.plugins.push(
new PrerenderSPAPlugin({
// 生成文件的路径,也可以与webpakc打包的一致。
// 下面这句话非常重要!!!
// 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname, 'dist'),
// Optional - The location of index.html
// indexPath: path.join(__dirname, '../dist', 'index.html'),
// 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。
routes: ['/', '/school'],
// 预渲染代理接口
// server: {
// proxy: {
// '/api': {
// target: 'http://localhost:9018',
// secure: false
// }
// }
// },
// 这个很重要,如果没有配置这段,也不会进行预编译
renderer: new Renderer({
// headless: false,
renderAfterDocumentEvent: 'render-event', // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
args: ['--no-sandbox', '--disable-setuid-sandbox']
})
})
)
- 在入口main.js中添加
new Vue({
router,
store,
// 添加mounted,不然不会执行预编译
mounted() {
document.dispatchEvent(new Event('render-event'))
},
render: h => h(App)
}).$mount('#app')
-
运行打包命令
npm run build
后根据配置出现文件
-
放到nginx中进行测试,效果如图
总结
- 配合vue-meta-info可以针对spa的vue项目配置单独的title,meta,keyword,descriptions等
- 预渲染无法渲染异步加载的数据,如果需要对数据做seo还是推荐用nuxt搭建框架
- 配置简单,开箱即用,对原有框架基本没有影响
- 需要路由为history模式