Vue-Cli3.0 单页面如何预渲染，解决登录拦截导致无法部分路由无法预渲染问题？...

vue单页面不利于seo,如何解决已有spa项目seo问题？

1.安装
	cnpm install prerender-spa-plugin --save-dev

2.路由history模式
	const router = new Router({
	  mode: 'history'
	})
	
3.vue.config.js 中的配置
	const PrerenderSPAPlugin = require('prerender-spa-plugin');
	const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
	const path = require('path');
	configureWebpack: () => {
	  if (process.env.NODE_ENV !== 'production') return;
	  config.plugins.push(
		new PrerenderSPAPlugin({
		  // 生成文件的路径，也可以与webpakc打包的一致。
		  // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。！！！
		  //代码打包目录
		  staticDir: path.join(__dirname, "dist"), 
		  // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
		  //要预渲染的页面路由
		  routes: ["/", "/order", "/orderdetail", "/meetingdetail", "/menber", "/trip", "/login"],
		  // 这个很重要，如果没有配置这段，也不会进行预编译
		  renderer: new Renderer({
			//默认挂在window.__PRERENDER_INJECTED对象上，可以通过window.__PRERENDER_INJECTED.foo在预渲染页面取值
			inject: {
			  foo: "bar"
			},
			//渲染时显示浏览器窗口。对调试很有用。
			headless: true,
			// 等到事件触发去渲染，此处我理解为是Puppeteer获取页面的时机
			// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
			renderAfterDocumentEvent: "render-event"
		  })
		})
	  );
	}

4.main.js中配置
	new Vue({
	  router,
	  store,
	  render: (h) => h(App),
	  // 添加mounted，不然不会执行预编译
	  mounted() {
		document.dispatchEvent(new Event('render-event'));
	  }
	}).$mount('#app');


5.npm run build

　　

 　　查看dist 文件目录里面有没有按已配置路由生成的文件夹对应的.html文件，生成了则成功

注意：

　　1.配置路由history模式

　　　　a.如果不配置history模式也能打包成功，但是页面内容还是没有预渲染

　　　　b. history模式需后台配置 ： https://blog.csdn.net/guojun13598079464/article/details/81357569

　　2.登录路由拦截，导致后面的页面无法预渲染打包问题处理

　　　　用window.__PRERENDER_INJECTED去解决

转载于:https://www.cnblogs.com/changxue/p/11458198.html