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,，因而預渲染成功了有了數據信息，我這也算是另闢蹊徑了，不知道有沒有大神知道到底該怎麼配置，我查邊文檔也沒有找到。