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 …的错误；解决： npm install puppeteer --save；
2.预加载打包之后页面是静态页面，点击跳转页面无法跳转，没有加载js；所以要在最外层router-view外包一层 “< div id=“app”>”
