众所周知单页面应用不利于SEO，为了解决这个问题网上所给出的2个解决方案

**1、SSH服务器端渲染2、预渲染**由于页面较少，且预渲染相对于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服务器上，由于服务器是做过反向代理的所以可以请求到数据，于是我将 ':' + port + route，直接改成了我服务器上的地址 '' + route,，于是预渲染成功了有了数据信息，我这也算是另辟蹊径了，不知道有没有大神知道到底该怎么配置，我查边文档也没有找到。