prerender-spa-plugin 預渲染插件的使用說明

孫吉亮發布于2019-08-21 18:25 / 2919人閱讀

摘要：眾所周知單頁面應用不利于，為了解決這個問題網上所給出的個解決方案服務器端渲染預渲染由于頁面較少，且預渲染相對于比較簡單，于是選擇預渲染頁面，預渲染可以極大的提高網頁訪問速度。

眾所周知單頁面應用不利于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怎么使用圖形插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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