vue做SEO优化

vue开发的都是单页面应用，相比多页面应用有避免共用资源重复加载、局部刷新更改、页面切换快、用户体验好、转场动画容易实现、维护成本低等优点，但是也有SEO优化困难，开发成本高需要借助专业框架等缺点，为解决seo优化的问题，有ssr（服务端渲染）和预渲染两种解决方案

预渲染

安装vue-meta-info插件
vue-meta-info 是一个基于 vue 2.0 的插件，它会让你更好的管理你的 app 里面的 meta 信息。你可以直接 在组件内设置 metainfo 便可以自动挂载到你的页面中。自动更新你的 title、meta 等信息。

1. npm install vue-meta-info –save
2. 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