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

孙吉亮发布于2019-08-21 18:25 / 2802人阅读

摘要：众所周知单页面应用不利于，为了解决这个问题网上所给出的个解决方案服务器端渲染预渲染由于页面较少，且预渲染相对于比较简单，于是选择预渲染页面，预渲染可以极大的提高网页访问速度。

众所周知单页面应用不利于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,，于是预渲染成功了有了数据信息，我这也算是另辟蹊径了，不知道有没有大神知道到底该怎么配置，我查边文档也没有找到。

云服务器 GPU云服务器 js视频预加载插件 js数据渲染插件 html使用插件 js怎么使用图形插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90450.html

前端prerender-spa-plugin预渲染

摘要：预渲染构建阶段生成匹配预渲染路径的文件注意每个需要预渲染的路由都有一个对应的。使用安装中引入代码打包目录模板页面要预渲染的页面路由默认挂在对象上，可以通过在预渲染页面取值渲染时显示浏览器窗口。 prerender-spa-plugin预渲染：构建阶段生成匹配预渲染路径的 html 文件（注意：每个需要预渲染的路由都有一个对应的html）。构建出来的 html 文件已有部分内容。 pre...

godiscoder 2019-08-23 15:16 评论0 收藏0
处理 Vue 单页面 SEO 的另一种思路

摘要：官方地址设置单页面信息，如果需要单页面，可以和形成更优的配合单页面应用在前端正大放光彩。随着单页面应用的普及，人们在感受其带来的完美的用户体验，极强的开发效率的同时，也似乎不可避免的要去处理的需求。 vue-meta-info 官方地址： https://github.com/monkeyWang... （设置vue 单页面meta info信息，如果需要单页面SEO，可以和 prer...

shiweifu 2019-08-01 17:35 评论0 收藏0
处理 Vue 单页面 SEO 的另一种思路

摘要：官方地址设置单页面信息，如果需要单页面，可以和形成更优的配合单页面应用在前端正大放光彩。随着单页面应用的普及，人们在感受其带来的完美的用户体验，极强的开发效率的同时，也似乎不可避免的要去处理的需求。 vue-meta-info 官方地址： https://github.com/monkeyWang... （设置vue 单页面meta info信息，如果需要单页面SEO，可以和 prer...

yangrd 2019-08-21 16:21 评论0 收藏0
Vue现有项目改造为Nuxt项目

摘要：好了，项目启动了，目录结构也清楚了，接下来就是整个现有项目的迁移了目前正在改造项目，文章尚未写完，会抽时间不定期的继续更新项目的改造过程及分享改造过程中遇到的问题公司项目，最初只为了实现前后端分离式开发，直接选择了vue框架进行开发，然而现在项目基本完成了，发现蜘蛛根本就抓取不到网站数据，搜索引擎搜出来，都是一片空白没有数据，需要对项目做SEO优化。本人第一次接触SEO的优化，完全...

Invoker 2019-08-26 10:25 评论0 收藏0
vue项目中的常见问题（vue-cli版本3.0.0）

摘要：在要改变的样式前加二问题去掉项目路径中的主要用到的模式。这里建议你直接看官网的，版本的和版本的不同。当浏览器窗口变小时，组件宽度不随窗口响应变小。这里我们需要冲突掉中的样式，该值不能设置成可以改成小于即可。一、样式问题 1.vue中使用less 安装less依赖 npm install less less-loader --save-dev 在使用时在style标签中加入 lang...

wangbjun 2019-08-22 16:08 评论0 收藏0