vue项目使用prerender-spa-plugin + vue-meta-info seo优化

vue项目使用prerender-spa-plugin + vue-meta-info seo优化

一.安装

prerender-spa-plugin的安装及使用
1.npm install prerender-spa-plugin --save
2.在webpack.prod.config.js 中引入
const PrerenderSPAPlugin = require(‘prerender-spa-plugin’)
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

在plugins中加入
new PrerenderSPAPlugin({
// Required - The path to the webpack-outputted app to prerender.
staticDir: path.join(__dirname, ‘…/dist’),
// Required - Routes to render.
routes: [ ‘/’, ‘/InformationCentreListF’,’/InformationCentreListB’, ‘/InformationDetails’], //这里填写你需要预加载的页面
renderer: new Renderer({
inject: {
foo: ‘bar’
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event(‘render-event’))，两者的事件名称要对应上。
renderAfterDocumentEvent: ‘render-event’
})
})

3.在main.js 中加入 mounted () {
document.dispatchEvent(new Event(‘render-event’))
}

vue-meta-info安装及使用
1.npm install vue-meta-info --save
2.在main.js中加入
import MetaInfo from ‘vue-meta-info’
Vue.use(MetaInfo)
3.在需要配置的页面加入
metaInfo: {
title: ‘标题’, // set a title
meta: [{ // set meta
name: ‘name’,
content: ‘内容’
}],
link: [{ // set link
rel: ‘assets’,
href: ‘https://assets-cdn.github.com/’
}]
},

排坑

**首先路由模式必须是 history 模式；
1.在安装完成之后npm run build，可能会出现报错提示puppeteer unable …的错误，因为prerender-spa-plugin插件是需要依赖puppeteer的，也就是谷歌出品的无头浏览器插件，这个插件会下载最新版的chromium(大约200M+）；解决： npm install puppeteer --save；

2.预加载打包之后页面是静态页面，点击跳转页面无法跳转，没有加载js；所以要在最外层router-view外包一层 “< div id=“app”>”

3.点击跳转页面如果是新打开的页面，css js 等资源会加载不到，需要将 “assetsPublicPath: ‘./’”, 改为 “assetsPublicPath: ‘/’”，“/”是根目录（当前域名），“./”是当前目录（浏览器当前地址）；