Vue预渲染prerender-spa-plugin+vue-meta-info_vue-meta 预渲染-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_63685551/article/details/127760308

前言

vue属于单页面应用，对于SEO不太友好，当然vue也给出了相应的解决办法，可以通过vue ssr服务端渲染进行解决，但对于页面较少的企业站来说可以直接使用 prerender-spa-plgin，本文总结prerender-spa-plugin+vue-meta-info做seo优化及遇到的问题。

一、prerender-spa-plugin使用

vue版本2.6.12
webpack4.0

1.安装

//npm 
npm install prerender-spa-plugin --save
//yarn
yarn add prerender-spa-plugin --dev

2.vue.config.js配置


const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
	//配置绝对路径
    publicPath: '/',
    outputDir: 'dist',
    assetsDir: 'static',
    configureWebpack: config=> {
    //在开发环境不进行预渲染操作
    if(process.env.NODE_ENV === 'production'){
	       const plugins=[
	            new PrerenderSPAPlugin({
	            	//根目录
	                staticDir: resolve('dist'),
	                //需要预渲染的路由
	                routes:['/','/about','/contact'],
	                renderer: new Renderer({
	                  ignoreJSErrors: true,
	                  inject: {
	                    foo: 'bar'
	                  },
	                  //渲染时显示浏览器窗口,建议直接为true
	                  headless: true,
	                  //最大渲染路由数量
	                  maxConcurrentRoutes:20,
	                  //延迟多长时间进行渲染
	                  renderAfterTime: 5000,
	                  //main.js中进行对应配置
	                  renderAfterDocumentEvent: 'render-event'
	                })
	            })
	        ]
	        config.plugins.push(...plugin)
        }
    }
}

3.main.js配置

new Vue({
    el: '#app',
    store,
    router,
    render: h => h(App),
    //重要部分
    mounted () {
      document.dispatchEvent(new Event('render-event'))
     }
})

4.router.js中一定要设置history模式

export default new Router({
    mode: 'history', // 路由模式
    routes: constantRoutes,
})

5.npm run build
打包之后可以看到配置好的路由生成了相应的html页面

二、vue-meta-info使用

1.安装

npm install vue-meta-info --save

2.main.js引用

import MetaInfo from 'vue-meta-info'
// 注册 
Vue.use(MetaInfo)

3.页面使用

//单个页面配置
<template>
	<div>首页</div>
</template>
export default {
	name:'首页'
	metaInfo:{
		title:'首页',
		meta:[
			{
				name: 'keyWords',
        		content:'关键字'
        	},
        	{
				name:'description',
				content:'描述'
			}
		]
	}
}
//多页面配置
<template>
	<div>首页</div>
</template>
export default {
	name:'index'
	metaInfo():{
		return{
			meta:this.metaData
		}
	},
	data(){
		return{
			metaData:''
		}
	},
	watch:{
		$route(to,form){
		//通过跳转页面配置每个页面的关键字和描述，这只是个例子
		//注意如果通过to.path去判断 需要进行兼容判断 因为渲染后的访问路径会在末尾自动添加/ 例如 loclhost:3000/index/,这个时候就需要 to.path === '/index' || to.path==='/index/'
			if(to.name === 'index'){
				this.metaData=[
					{
						name: 'keyWords',
		        		content:'关键字'
		        	},
		        	{
						name:'description',
						content:'描述'
					}
				]
			}
			//当然也可以封装一个方法去返回每个页面的文案
			//this.metaData = metaSetFuc(to.name)
		}
	}
}

三、在使用中遇到的问题

1. [prerender-spa-plugin] Unable to prerender all routes! 错误
在node_modules -> @prerender -> renderer-puppeteer -> es6 -> renderer.js(113行)

await page.goto(`${baseURL}${route}`, navigationOptions);
//修改为
await page.goto(`${baseURL}${route}`, {...navigationOptions, timeout: 0});

2.修改完成之后一直处于build状态打包并未成功
检查一下index.html中是否存在引用外部css/js文件，因为在打包过程中未能拉取外部文件内容导致一直处于build状态，例如

<head>
	//这种形式引用思源黑体字体库
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900">
</head>

3.假如项目中用到了swiper，也许会产生一个问题进行预渲染后，swiper-slide渲染了个默认800px的宽度，导致刷新页面轮播图样式显示异常，暂时只能手动修改打包后的文件 如果有解决办法欢迎留言

使用webpack5可以看一下: prerender-spa-plugin-next