VUE(cli3.0) 使用prerender-spa-plugin + vue-meta-info做SEO和预渲染的效果及处理 prerender-spa-plugin 打包出错
prerender-spa-plugin + vue-meta-info 做SEO和预渲染的效果首先说说 prerender-spa-plugin 这玩意儿这个就弄预渲染,好处就是预渲染可以极大的提高网页访问速度,配合一些meat插件,就可以可以满足SEO需求,尤其是开发到一半的项目没有配置SSR有需要SEO的需求,这个时候prerender-spa-plugin + vue-meta-info
·
prerender-spa-plugin + vue-meta-info 做SEO和预渲染的效果
首先说说 prerender-spa-plugin 这玩意儿
这个就弄预渲染,好处就是预渲染可以极大的提高网页访问速度,配合一些meat插件,就可以可以满足SEO需求,尤其是开发到一半的项目没有配置SSR有需要SEO的需求,这个时候prerender-spa-plugin + vue-meta-info 就可以达到要求
1.安装 (我用的npm)
npm install --save prerender-spa-plugin
2. vue.config.js配置文件 和main.js文件的配置
config.plugins.push(
new PrerenderSPAPlugin({ //预渲染 处理页面SEO
staticDir: path.join(__dirname, 'dist'),
// 需要进行预渲染的路由路径 我这里做的是首页
routes: ['/home'], //需要预渲染的路由页面 我这只用了首页
// html文件压缩
minify: {
minifyCSS: true, // css压缩
removeComments: true // 移除注释
},
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 new Vue({ mounted () {document.dispatchEvent(new Event('render-event'))}}),两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
})
)
new Vue({
router,
store,
render: h => h(App),
mounted () {
document.dispatchEvent(new Event('render-event')) // 预渲染
// document.dispatchEvent(new Event('custom-render-trigger')) // 预渲染
}
}).$mount('#app')
这个时候就可以打包了,到这一步有的人(本人遇见过)可能会出现这种情况,打包出错,但是dist文件有成功打包,这其实是预渲染打包文件失败,但是正常的打包文件成功,只不过没有预渲染
[prerender-spa-plugin] Unable to prerender all routes!
//[prerender-spa-plugin]无法渲染所有路线!
这个时候怎么办呢? 直接看下面的代码 vue.config.js配置文件 和main.js文件的配置
config.plugins.push(
new PrerenderSPAPlugin({ //预渲染 处理页面SEO
staticDir: path.join(__dirname, 'dist'),
// 需要进行预渲染的路由路径 我这里做的是首页
routes: ['/home'],
// html文件压缩
minify: {
minifyCSS: true, // css压缩
removeComments: true // 移除注释
},
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 new Vue({ mounted () {document.dispatchEvent(new Event('render-event'))}}),两者的事件名称要对应上。
//直接注释下面这一句
//renderAfterDocumentEvent: 'render-event'
})
})
)
new Vue({
router,
store,
render: h => h(App),
mounted () {
//document.dispatchEvent(new Event('render-event')) // 预渲染
//上面一行注释,用下面这行
document.dispatchEvent(new Event('custom-render-trigger')) // 预渲染
}
}).$mount('#app')
3. 以上两种方式成功打包出来的文件目录是这样的
这时候发现多了一个home的文件夹 这个就是首页的预渲染文件了 看到这个目录就说明打包成功了
顺便在说说 vue-meta-info 的使用
如图显示 直接使用就行了
附上文档链接 https://www.npmjs.com/package/vue-meta-info
更多推荐
已为社区贡献2条内容
所有评论(0)