vue 项目 SEO 解决方案 - 预渲染

我们都知道 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 ，无法实现动态配置