成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

prerender-spa-plugin 預(yù)渲染插件的使用說(shuō)明

孫吉亮 / 2998人閱讀

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

眾所周知單頁(yè)面應(yīng)用不利于SEO，為了解決這個(gè)問(wèn)題網(wǎng)上所給出的2個(gè)解決方案
**1、SSH服務(wù)器端渲染
2、預(yù)渲染**
由于頁(yè)面較少，且預(yù)渲染相對(duì)于SSH比較簡(jiǎn)單，于是選擇預(yù)渲染頁(yè)面，預(yù)渲染可以極大的提高網(wǎng)頁(yè)訪問(wèn)速度。而且配合一些meat插件，基本可以滿(mǎn)足SEO需求
下面就來(lái)簡(jiǎn)單介紹一下
在webpack.

var PrerenderSpaPlugin = require("prerender-spa-plugin")

var webpackConfig = merge(baseWebpackConfig, {
  plugins: [
    //這段代碼意思是拷貝static文件至根目錄使得渲染的文件可以找到j(luò)s、css
    new CopyWebpackPlugin([{
      from: "static"
    }]),
    
    
    new PrerenderSpaPlugin(
    //將渲染的文件放到dist目錄下
      path.join(__dirname, "../dist"),   
      //需要預(yù)渲染的路由信息
      [ "/","/introduct","/culture","/Chairman","/president","/fund","/news","/honor" ],
      {
      //在一定時(shí)間后再捕獲頁(yè)面信息，使得頁(yè)面數(shù)據(jù)信息加載完成
        captureAfterTime: 50000,
        //忽略打包錯(cuò)誤
        ignoreJSErrors: true,
        phantomOptions: "--web-security=false",
        maxAttempts: 10,
      }
    ),

如果是一般不用跨域的網(wǎng)站到此已經(jīng)完成，然而api需要跨域的時(shí)候請(qǐng)求的數(shù)據(jù)全部都請(qǐng)求不到，所有的頁(yè)面都只有一個(gè)骨架，順便貼一下跨域

 proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      "/api": {
        target: "http://192.26.26.xx/api",
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
      }

在打包之后跨域是不生效的，需要在nginx服務(wù)器做一個(gè)反向代理，
預(yù)渲染的時(shí)候請(qǐng)求全都是localhost:8080所以沒(méi)有數(shù)據(jù)信息
在網(wǎng)上查了半天也沒(méi)發(fā)現(xiàn)怎么解決
查看prerender-spa-plugin的代碼發(fā)現(xiàn)他是用的Hapi，找到插件下面的compile-to-html.js 文件發(fā)現(xiàn)下面這段代碼

 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)
          ]

于是我突發(fā)奇想 將打包好的沒(méi)有數(shù)據(jù)的文件放到nginx服務(wù)器上，由于服務(wù)器是做過(guò)反向代理的所以可以請(qǐng)求到數(shù)據(jù)，于是我將 "http://localhost:" + port + route，直接改成了我服務(wù)器上的地址 "http://192.164.xx.xx" + route,，于是預(yù)渲染成功了有了數(shù)據(jù)信息，我這也算是另辟蹊徑了，不知道有沒(méi)有大神知道到底該怎么配置，我查邊文檔也沒(méi)有找到。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/90450.html

相關(guān)文章

  • 前端prerender-spa-plugin預(yù)渲染

    摘要：預(yù)渲染構(gòu)建階段生成匹配預(yù)渲染路徑的文件注意每個(gè)需要預(yù)渲染的路由都有一個(gè)對(duì)應(yīng)的。使用安裝中引入代碼打包目錄模板頁(yè)面要預(yù)渲染的頁(yè)面路由默認(rèn)掛在對(duì)象上，可以通過(guò)在預(yù)渲染頁(yè)面取值渲染時(shí)顯示瀏覽器窗口。 prerender-spa-plugin預(yù)渲染：構(gòu)建階段生成匹配預(yù)渲染路徑的 html 文件（注意：每個(gè)需要預(yù)渲染的路由都有一個(gè)對(duì)應(yīng)的html）。構(gòu)建出來(lái)的 html 文件已有部分內(nèi)容。 pre...

    godiscoder 評(píng)論0 收藏0

  • 處理 Vue 單頁(yè)面 SEO 的另一種思路

    摘要：官方地址設(shè)置單頁(yè)面信息，如果需要單頁(yè)面，可以和形成更優(yōu)的配合單頁(yè)面應(yīng)用在前端正大放光彩。隨著單頁(yè)面應(yīng)用的普及，人們?cè)诟惺芷鋷?lái)的完美的用戶(hù)體驗(yàn)，極強(qiáng)的開(kāi)發(fā)效率的同時(shí)，也似乎不可避免的要去處理的需求。 vue-meta-info 官方地址： https://github.com/monkeyWang... （設(shè)置vue 單頁(yè)面meta info信息，如果需要單頁(yè)面SEO，可以和 prer...

    shiweifu 評(píng)論0 收藏0

  • 處理 Vue 單頁(yè)面 SEO 的另一種思路

    摘要：官方地址設(shè)置單頁(yè)面信息，如果需要單頁(yè)面，可以和形成更優(yōu)的配合單頁(yè)面應(yīng)用在前端正大放光彩。隨著單頁(yè)面應(yīng)用的普及，人們?cè)诟惺芷鋷?lái)的完美的用戶(hù)體驗(yàn)，極強(qiáng)的開(kāi)發(fā)效率的同時(shí)，也似乎不可避免的要去處理的需求。 vue-meta-info 官方地址： https://github.com/monkeyWang... （設(shè)置vue 單頁(yè)面meta info信息，如果需要單頁(yè)面SEO，可以和 prer...

    yangrd 評(píng)論0 收藏0

  • Vue現(xiàn)有項(xiàng)目改造為Nuxt項(xiàng)目

    摘要：好了，項(xiàng)目啟動(dòng)了，目錄結(jié)構(gòu)也清楚了，接下來(lái)就是整個(gè)現(xiàn)有項(xiàng)目的遷移了目前正在改造項(xiàng)目，文章尚未寫(xiě)完，會(huì)抽時(shí)間不定期的繼續(xù)更新項(xiàng)目的改造過(guò)程及分享改造過(guò)程中遇到的問(wèn)題 公司項(xiàng)目，最初只為了實(shí)現(xiàn)前后端分離式開(kāi)發(fā)，直接選擇了vue框架進(jìn)行開(kāi)發(fā)，然而現(xiàn)在項(xiàng)目基本完成了，發(fā)現(xiàn)蜘蛛根本就抓取不到網(wǎng)站數(shù)據(jù)，搜索引擎搜出來(lái)，都是一片空白沒(méi)有數(shù)據(jù)，需要對(duì)項(xiàng)目做SEO優(yōu)化。 本人第一次接觸SEO的優(yōu)化，完全...

    Invoker 評(píng)論0 收藏0

  • vue項(xiàng)目中的常見(jiàn)問(wèn)題（vue-cli版本3.0.0）

    摘要：在要改變的樣式前加二問(wèn)題去掉項(xiàng)目路徑中的主要用到的模式。這里建議你直接看官網(wǎng)的，版本的和版本的不同。當(dāng)瀏覽器窗口變小時(shí)，組件寬度不隨窗口響應(yīng)變小。這里我們需要沖突掉中的樣式，該值不能設(shè)置成可以改成小于即可。 一、樣式問(wèn)題 1.vue中使用less 安裝less依賴(lài) npm install less less-loader --save-dev 在使用時(shí) 在style標(biāo)簽中加入 lang...

    wangbjun 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<