vue预渲染（vue项目的seo优化）

vue 预渲染就是webpack集合 prerender-spa-plugin 插件实现的，通过路由的方式打包成每单独的页面具体看教程

vue 预渲染就是把他打包成一个一个 htnl文件有利于搜索引擎优化（简称seo优化）

1.安装插件 prerender-spa-plugin

   注意：一定要使用 cnpm（使用cnpm会减少报错）如何 cnpm不行在npm yarn

cnpm install prerender-spa-plugin --save-dev

安装插件报错解决办法：cnpm install cnpm install prerender-spa-plugin --save --ignore-scripts

2.在vue项目根目录创建一个 vue.config.js 里面写入如下内容

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

3.在mian.js中增加 mounted函数

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

4.vue中的路由模式必须是 history 模式

		const router = new VueRouter({
	
		  mode: 'history',
	
		  routes 
	
		})

5.运行打包 npm run build （推荐使用 vue ui 里面的打包可视化工具使用：直接项目根目录 vue ui ）打包查看一下dist目录是不是对应的多几个 vue 路由对应的html文件

思路：
主要是通过插件prerender-spa-pluhin 设置路由的方式生成：路由对应的html文件