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