vue开发的都是单页面应用,相比多页面应用有避免共用资源重复加载、局部刷新更改、页面切换快、用户体验好、转场动画容易实现、维护成本低等优点,但是也有SEO优化困难,开发成本高需要借助专业框架等缺点,为解决seo优化的问题,有ssr(服务端渲染)和预渲染两种解决方案
预渲染
安装vue-meta-info插件
vue-meta-info 是一个基于 vue 2.0 的插件,它会让你更好的管理你的 app 里面的 meta 信息。你可以直接 在组件内设置 metainfo 便可以自动挂载到你的页面中。自动更新你的 title、meta 等信息。
- npm install vue-meta-info --save
- npm install prerender-spa-plugin --save-dev
// main.js
import Vue from 'vue'
import MetaInfo from 'vue-meta-info'
vue.use(MetaInfo)
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
mounted () {
document.dispatchEvent(new Event('render-event'))
}
})
//组件内
export default {
name: 'index',
metaInfo: {
title: '标题',
meat: [
{
name: 'keywords',
content:: '分期乐分期乐'
},
{
name: 'keywords',
content:: '分期乐分期乐'
}]
}
}
routre.js中需要设置mode: ‘history’
// webpackprod.conf.js
const webpackConfig = merge(baseWebpackConfig, {
plugins: [
// new不能放在plugins开头,否则会导致编译报错
new PrerenderSPAPlugin({
//生成文件的路径,也可与webpack打包的一致,此目录只能有一级,如果大于一级生成式不会有错误提示,预渲染时会卡着不动
staticDir: path.join(_dirname, '../dist'),
//对应自己的路由文件,如index有参数就要写成/index/param1
routes: ['/', '/download'],
//没有此配置不会进行预编译
renderer: new Renderder({
inject: {
foo: 'bar'
},
headless: false,
// main.js中document.dispatchEvent(new Event('render-event')),两者事件名称要对应上
renderAfterDocumentEvent: 'render-event'
})
})
]
}
运行npm run build,生成的dist目录中有每个路由名称对应的文件夹,可以用编辑器查看目录中index.html的head标签下是否有生成的meta