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

https://segmentfault.com/a/1190000012605930

众所周知单页面应用不利于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服务器上，由于服务器是做过反向代理的所以可以请求到数据，于是我将 'http://localhost:' + port + route，直接改成了我服务器上的地址 'http://192.164.xx.xx' + route,，于是预渲染成功了有了数据信息，我这也算是另辟蹊径了，不知道有没有大神知道到底该怎么配置，我查边文档也没有找到。

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

猜你喜欢