Vue-cli使用prerender-spa-plugin插件预渲染的问题

网上已经有很完整的如何使用vue-cli 与 prerender-spa-plugin插件预渲染，这里就不做记录了
需要记录的是：
       预渲染出来的页面是静态的，所以不要动不动就把‘/’路径做预渲染，你会发现上架服务器后什么都点不了
我的处理方式是，另写路由来实现渲染 不影响本来项目

路由中

//预渲染路径
{
    
    
  path: '/yuHome',
  component: resolve => require(['../pages/home.vue'], resolve)
},
{
    
    
  path: '/yuAgency',
  component: resolve => require(['../pages/agency.vue'], resolve)
},
{
    
    
  path: '/yuPurchase',
  component: resolve => require(['../pages/purchase.vue'], resolve)
},
{
    
    
  path: '/yuGetApi',
  component: resolve => require(['../pages/getApi.vue'], resolve)
},

vue.config.js中

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