背景：

        vue3.2.13+vuecil5.0.8+prerender-spa-plugin-next4.2.3

悲催实录：

        由于产品突发奇想地，要对产品登录页来个seo处理。针对单页面我一下想到了prerender-spa-plugin，好的想到之前都是vue3项目就没想那么多立马上手安装，不出意外的还是出了意外。  

踩坑：Unable to prerender all routes!

好的很好，抓耳挠腮，上网求助，在广大网友的帮助下我找到了它的兄弟

prerender-spa-plugin-next

看着广大网友顺畅的操作，我也一一拷贝使用

1、安装 prerender-spa-plugin-next

npm i prerender-spa-plugin-next -D

2、vue.config.js进行配置

const { defineConfig } = require('@vue/cli-service')
const PrerenderSPAPlugin = require('prerender-spa-plugin-next')
module.exports = defineConfig({
  lintOnSave: false,
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        routes: ['/', '/login']  // 需要预渲染的页面，要与router路由一致
      })
    ]
  }
})

3、更改路由配置为history(测试后跟这个无关，用hash模式也可以的) 

const router = createRouter({
    // 这里跟Vue2不一样！Vue2这里要改成 mode：‘history’，但是！Vue3这块是这样用的。
    history:createWebHistory(),
    routes
})

 不出意外又出意外了，包是打成功了，就是不生效啊
页面还是那个页面，我陷入了深深的自我怀疑。

分析测试：

在网上继续耕耘查找，看到一些进阶版的配置

// vue.config.js

plugins: [
  new PrerenderSPAPlugin({
    staticDir: resolve('dist'),// 读取vue-cli已打包文件的根目录 prerender-spa-plugin会在这里开启一个服务
    routes: ['/','/login' ],// 需要预渲染的路由
    renderer: new Renderer({
      // 渲染时显示浏览器窗口，调试时有用
      headless: false,

      renderAfterDocumentEvent: 'render-event'
    })
  })
]


// main.js
new Vue({
	  el: '#app',
	  router,
	  store,
	  render: h => h(App),
	  // 预渲染
	  mounted () {
	    	document.dispatchEvent(new Event('render-event'))
	  }
})

//如果main.js使用的是createApp,就在APP.vue中添加
onMounted() {
  document.dispatchEvent(new Event('render-event'))
}

一一测试，毫无效果，复盘思考，去繁化简。

新建一个新项目，同样的配置，路由简化到只有指定的路由，页面也只是单一的展示，重复配置打包的过程，成功了呀，
再来同样的页面，打包，还是成功了

现在就剩下路由配置了，嗯多出来的路由守卫，观察下有什么不同

注释到这行判断，打包就行了，放上去就又崩了，问题到此基本上知道了

具体再分析下，是因为阻塞了还是怎么的

换种写法，重新打包，结果还是ok的
好的，我了解了，它不识别es6的语法？？？？

测试结论：

在自己的项目上进行测试，果然成功实现了，结果就是因为这个es6的语法糖，让他不生效的嘛？

结语：

针对我这种情况，我期间也盲目的配置了很多，抓耳挠腮好久，却完全忽略了去繁化简的调试，在中间耽搁了很多时间，如果有小伙伴也出现类似的问题，别着急配置很复杂的东西，简单单一的针对处理往往才能发现问题所在，共勉，撒花，完结啦