正文
vue spn如何做seo优化
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
vue spa如何做seo优化突然来了一个需求，对已有的项目做SEO优化，WHAT？ 总所周知，spa对seo不够优化，因而官方考虑到直接使用ssr
一个不算解决办法的办法prerender-spa-plugin
突然来了一个需求，对已有的项目做SEO优化，WHAT？ 总所周知，spa对seo不够优化，因而官方考虑到直接使用ssr
// build/webpack.prod.conf.js
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
new PrerenderSPAPlugin({
// 生成文件的路径，也可以与webpakc打包的一致。
// 下面这句话非常重要！！！
// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname, '../dist'), // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
routes: ['/opty', '/customer', '/channelVendor', '/contract_type', '/contract', '/bill'], // 这个很重要，如果没有配置这段，也不会进行预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js mounted 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
})// main.js
new Vue({
router,
store,
render: h => h(App),
mounted () {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')// router 需要使用history
new Router({
mode: 'history',
routes
})
参考资料1，2
