我们都知道 VUE、React 这种框架写的项目都是 js 动态渲染的页面,这样就无法用爬虫拿到页面上的静态资源;也就是不利于 SEO;
针对 VUE 我们有两种主流的方案:预渲染、服务端渲染;这个文章主要说说预渲染;需要用到下面两种插件:
1、创建 vue2.x 项目
npm i -g @vue/cli
vue create xxx
2、prerender-spa-plugin
安装
npm i prerender-spa-plugin-next -save
配置 vue.config.js 文件
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin-next')
module.exports = {
plugins: [
...
new PrerenderSPAPlugin({
// Required - The path to the webpack-outputted app to prerender.
staticDir: path.join(__dirname, 'dist'),
// Required - Routes to render.
routes: [ '/', '/about', '/some/deep/nested/route' ],
})
]
}
配置路由:路由需要是 history
main.js 触发预渲染
// main.js
new Vue({
el: '#app',
router,
store,
render: h => h(App),
// 预渲染
mounted () {
document.dispatchEvent(new Event('render-event'))
}
})
3、vue-meta-info
安装
npm i vue-meta-info -save
main.js引入
import MetaInfo from 'vue-meta-info'
// 注册
Vue.use(MetaInfo)
页面使用
//单个页面配置
<template>
<div>首页</div>
</template>
export default {
name:'首页'
metaInfo:{
title:'首页',
meta:[
{
name: 'keyWords',
content:'关键字'
},
{
name:'description',
content:'描述'
}
]
}
}
这样打包的时候就能看到 dist 中打包出了多个页面的静态资源;
4、流程
读取配置,获取预渲染页面 —— 模拟浏览器打开页面 —— 页面触发渲染 —— 渲染出当前页面内容 —— 获取当前所有 DOM 结构 —— 生成 HTML 文件
5、注意
1、这种方法无法配置动态路由
2、预渲染的页面都需要配置路由
3、适合一个项目中其中几个页面做预处理
4、改变 title ,无法实现动态配置