前言
vue屬于單頁面應用修然，對于SEO不太友好非区，當然vue也給出了相應的解決辦法郭膛，可以通過vue ssr服務端渲染進行解決麸拄，但對于頁面較少的企業(yè)站來說可以直接使用 prerender-spa-plgin惜索，本文總結(jié)prerender-spa-plugin+vue-meta-info做seo優(yōu)化及遇到的問題特笋。
一、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=> {
//在開發(fā)環(huán)境不進行預渲染操作
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,
//最大渲染路由數(shù)量
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頁面
269b23c7c40644e386393c1c5fe8f1b5.jpeg
二巾兆、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:'關(guān)鍵字'
},
{
name:'description',
content:'描述'
}
]
}
}
//多頁面配置
<template>
<div>首頁</div>
</template>
export default {
name:'index'
metaInfo():{
return{
meta:this.metaData
}
},
data(){
return{
metaData:''
}
},
watch:{
$route(to,form){
//通過跳轉(zhuǎn)頁面配置每個頁面的關(guān)鍵字和描述猎物，這只是個例子
//注意如果通過to.path去判斷 需要進行兼容判斷 因為渲染后的訪問路徑會在末尾自動添加/ 例如 loclhost:3000/index/,這個時候就需要 to.path === '/index' || to.path==='/index/'
if(to.name === 'index'){
this.metaData=[
{
name: 'keyWords',
content:'關(guān)鍵字'
},
{
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狀態(tài)打包并未成功
檢查一下index.html中是否存在引用外部css/js文件角塑，因為在打包過程中未能拉取外部文件內(nèi)容導致一直處于build狀態(tài)蔫磨，例如
<head>
//這種形式引用思源黑體字體庫
<link rel="stylesheet" >
</head>
3.假如項目中用到了swiper，也許會產(chǎn)生一個問題進行預渲染后圃伶，swiper-slide渲染了個默認800px的寬度堤如，導致刷新頁面輪播圖樣式顯示異常，暫時只能手動修改打包后的文件如果有解決辦法歡迎留言
使用webpack5可以看一下: prerender-spa-plugin-next
