vue项目一般为SPA应用,而单页面是不利于SEO的,目前有两种解决方案:
1、SSR服务器渲染:
“服务端渲染对于刚接触 vue 的新手来说,并不是那么友好,虽然已有官方 SSR 中文文档。但是对于一个已经开发完毕的 vue 项目去接 SSR 无论是从工作量还是技术角度来说,都是一种挑战。”--不是我说的。
大概意思就是:开发成本太大,不适合已完成/已上线的项目。
2、预渲染模式:
“访问预渲染出来的页面,在访问时与SSR一样快,并且它将服务端编译HTML的时机提前到了构建时,因此也降低了服务端的压力,如果你的服务器跟我的一样买的 1M1G1核 的小水管服务器 ( 穷 ),那么预渲染可能更适合你。不过SSR和预渲染的使用场景还是有较明显的区别的。预渲染的使用场景更多是简单的静态页面。服务端渲染适用于复杂、较大型、与服务端交互频繁的功能型网站,比如电商网站。”--这也不是我说的。
这时大家都会推荐使用一个插件:“prerender-spa-plugin ”,而且可以配合 vue-meta-info 来生成title和meta标签,基本可以满足SEO的需求 。
注意了:这时候有人会说“使用预渲染vue-router必须使用history模式,hash模式渲染页面都是一个。。。。”,本人亲测,没有这回事,不知道为什么!!!
而且,用了history路由线上环境不能刷新页面,因为会报404,不要问我为什么,自己百度找原因去。
如何使用prerender-spa-plugin?
1.
// 安装
npm install prerender-spa-plugin --save
2.找到他:
在webpack.prod.conf.js里面添加:
// 头部引入
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
在plugins里面添加:
new PrerenderSPAPlugin({
// 生成文件的路径,也可以与webpakc打包的一致。
// 下面这句话非常重要!!!
// 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname, '../dist'),
// 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。这里直接对照自己的router修改!!!
routes: ['/', '/a', '/b', '/c', '/d'],
// 预渲染代理接口
server: {
proxy: {
'/api': {
target: 'http://localhost:9018',
secure: false
}
}
},
// 这个很重要,如果没有配置这段,也不会进行预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,//这个必须有
// 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
}),
最后在main.js里面修改:
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
// 添加mounted,不然不会执行预编译
mounted () {
document.dispatchEvent(new Event('render-event'))
}
})
到这里预编译的配置修改就完成了,执行 npm run build 查看打包后的dist文件就会发现如下结构:
安装 vue-meta-info 配置title和meta:
npm install vue-meta-info --save
在main.js引入:
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
在vue页面中配置:
<script>
export default {
// 配置title和meta数据
metaInfo: {
title: '我是一个title',
meta: [
{
name: 'keywords',
content: '关键字1,关键字2,关键字3'
},
{
name: 'description',
content: '这是一段网页的描述'
}
]
},
data () {
return {}
}
}
</script>
此时 prerender-spa-plugin 与 vue-meta-info 就全部完成了 。
本文是本人根据网上的案列,自己亲测成功之后整理出来的。由于被history路由误导折磨了很久故此记录下来为了提醒自己,也为了让看到本文的人少爬点坑。。。