vue是单页面框架且前后端分离，不利于seo优化。针对这一点，还是有解决办法的。

预渲染后路由+点击事件失效问题解决——近期发现

最近遇到了一个前台官网，由于时间比较紧，所以我选择了用vue框架去搭建，这样绑定数据和各种插件的使用会比较简单，但是考虑到网站要做SEO优化处理，所以还需要最后进行预渲染。

预渲染的步骤就是下面的内容了。

预渲染结束后发现路由和点击事件都失效了。各种查资料后发现解决办法如下：

在App.vue文件中的template中添加一层div，绑定id为app即可

什么是SEO优化？

体现到代码上就是：(最重要的一个就是meta标签的展示)

meta标签中的name:可以使用keywords和description来添加搜索引擎的关键字和描述信息。这个就是爬虫会提取的部分。

以下部分是同事提供的，我暂时没有用到，在此做下记录，希望后续有帮助：

prerender-spa-plugin——轻量级的seo解决方案

prerender-spa-plugin:轻量级的seo解决方案，对于大型项目不适用

使用方法如下：

1.安装插件

npm install -D vue-meta-info
npm install -D prerender-spa-plugin

记录一下版本号：
"vue-meta-info": "^0.1.7",
"prerender-spa-plugin": "^3.4.0",

2.全局引入插件——vue-meta-info

在main.js文件中引入

import MetaInfo from 'vue-meta-info';
Vue.use(MetaInfo);

3.在需要的页面使用——vue-meta-info

<script>
	export default{
		metaInfo(){
			return{
				title:'首页',
				meta:[
					{name:'keywords',content:'测试'},
					{name:'description',content:'描述'}
				] 
			}
		}
	}
</script>

4.prerender-spa-plugin——vue.config.js文件配置

prerender-spa-plugin这个插件依赖于爬虫来抽取页面，检索SPA并生成预渲染内容(即’SSR’);

vue.config.js文件配置如下：

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
let webpackPlugins = "";
if(process.env.NODE_ENV.includes('production')){
	webpackPlugins = {
		plugins:[
			new PrerenderSPAPlugin({
				//生成文件的路径，也可以与webpack打包的一致
				//这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动
				staticDir:path.join(__dirname,'dist'),
				//对应自己的路由文件，比如a有参数，就需要写成/a/paraml
				routes:['/home'],
				//这个很重要,如果没有配置这段，也不会进行预编译
				renderer:new Renderer({
					inject:{
						foo:'bar'
					},
					headless:false,
					//在main.js中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上
					renderAfterBocumentEvent:'render-event'
				})
			})
		]
	}
}

5.prerender-spa-plugin——main.js文件配置

new Vue({
	router,
	store,
	render:h=>h(App),
	mounted(){
		document.dispathEvent(new Event('render-event'))
	}
}).$mount('#app');