VUE預(yù)渲染及遇到的坑

本文介紹了VUE預(yù)渲染及遇到的坑，分享給大家，具體如下：

創(chuàng)新互聯(lián)建站是一家專業(yè)的成都網(wǎng)站建設(shè)公司，我們專注成都做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷、企業(yè)網(wǎng)站建設(shè)，買(mǎi)友情鏈接，1元廣告為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計(jì)到用戶體驗(yàn)提高，創(chuàng)新互聯(lián)力求做到盡善盡美。

npm install -D prerender-spa-plugin

修改webpack.prod.conf.js，在CopyWebpackPlugin后面，增加內(nèi)容。

var PrerenderSpaPlugin = require('prerender-spa-plugin')
 
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èn)題

1.下載prerender-spa-plugin 失敗解決方案

我更新prerender-spa-plugin   發(fā)現(xiàn)運(yùn)行 下去都是  error報(bào)錯(cuò) 安裝不成功，

但是他會(huì)提示你對(duì)downloading  什么文件  保存到哪個(gè)位置對(duì)吧，

把他提示著  這個(gè)在瀏覽器 輸入，我的是下面這個(gè)

//windows
http://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zip
 
//MAC
https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-macosx.zip

也就是把  downloading后面的  鏈接 下載下來(lái)，然后放在他saving提示的目錄下

windows

C:\Users\hasee\AppData\Local\Temp\phantomjs

MAC路徑

/var/folders/sf/gyxbw5_s1sq45fb6hs5l_77m0000gn/T/phantomjs/

不用解壓，保留  .zip就好，然后你在更新下  prerender-spa-plugin

npm install prerender-spa-plugin

2. 安裝puppeteer報(bào)錯(cuò)

Puppeteer 至少需要 Node v6.4.0，如要使用 async / await，只有 Node v7.6.0 或更高版本才支持。 node下載地址： https://nodejs.org/zh-cn/

是因?yàn)樵趫?zhí)行安裝的過(guò)程中需要執(zhí)行install.js，這里會(huì)下載Chromium,官網(wǎng)建議是進(jìn)行跳過(guò)，我們可以執(zhí)行 —ignore-scripts 忽略這個(gè)js執(zhí)行。也可以通過(guò)設(shè)置環(huán)境變量set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1阻止下載 Chromium （因?yàn)榉饩W(wǎng)，直接下載會(huì)失?。?/p>

 1

npm i --save puppeteer --ignore-scripts

網(wǎng)上的另一種方法：

1.創(chuàng)建項(xiàng)目crawl

2. npm init

3.cmd 

set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1

4.npm install

5.npm -i puppeteer

puppeteer下載完成

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享名稱：VUE預(yù)渲染及遇到的坑
文章路徑：http://bm7419.com/article30/pcccso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、微信小程序、營(yíng)銷型網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)