prerender-spa-plugin 预渲染插件的使用说明

众所周知单页面应用不利于SEO，为了解决这个问题网上所给出的2个解决方案
**一、SSH服务器端渲染
二、预渲染**
因为页面较少，且预渲染相对于SSH比较简单，因而选择预渲染页面，预渲染能够极大的提升网页访问速度。并且配合一些meat插件，基本能够知足SEO需求
下面就来简单介绍一下
在webpack.

var PrerenderSpaPlugin = require('prerender-spa-plugin')

var webpackConfig = merge(baseWebpackConfig, {
  plugins: [
    //这段代码意思是拷贝static文件至根目录使得渲染的文件能够找到js、css
    new CopyWebpackPlugin([{
      from: 'static'
    }]),
    
    
    new PrerenderSpaPlugin(
    //将渲染的文件放到dist目录下
      path.join(__dirname, '../dist'),   
      //须要预渲染的路由信息
      [ '/','/introduct','/culture','/Chairman','/president','/fund','/news','/honor' ],
      {
      //在必定时间后再捕获页面信息，使得页面数据信息加载完成
        captureAfterTime: 50000,
        //忽略打包错误
        ignoreJSErrors: true,
        phantomOptions: '--web-security=false',
        maxAttempts: 10,
      }
    ),

若是是通常不用跨域的网站到此已经完成，然而api须要跨域的时候请求的数据所有都请求不到，全部的页面都只有一个骨架，顺便贴一下跨域

proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://192.26.26.xx/api',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
      }

在打包以后跨域是不生效的，须要在nginx服务器作一个反向代理，
预渲染的时候请求全都是localhost:8080因此没有数据信息
在网上查了半天也没发现怎么解决
查看prerender-spa-plugin的代码发现他是用的Hapi，找到插件下面的compile-to-html.js 文件发现下面这段代码

Server.start(function (error) {
          // If port is already bound, try again with another port
          if (error) return serveAndPrerenderRoute()

          var maxAttempts = options.maxAttempts || 5
          var attemptsSoFar = 0

          var phantomArguments = [
            Path.join(__dirname, 'phantom-page-render.js'),
            'http://localhost:' + port + route,
            JSON.stringify(options)
          ]

因而我突发奇想 将打包好的没有数据的文件放到nginx服务器上，因为服务器是作过反向代理的因此能够请求到数据，因而我将 'http://localhost:' + port + route，直接改为了我服务器上的地址 'http://192.164.xx.xx' + route,，因而预渲染成功了有了数据信息，我这也算是另辟蹊径了，不知道有没有大神知道到底该怎么配置，我查边文档也没有找到。