VUE預渲染及遇到的坑

發(fā)布時間：2020-09-18 14:54:44 來源：腳本之家閱讀：194 作者：寒星冷雨欄目：web開發(fā)

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

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'),  
   //需要預渲染的路由信息
   [ '/','/introduct','/culture','/Chairman','/president','/fund','/news','/honor' ],
   {
   //在一定時間后再捕獲頁面信息，使得頁面數(shù)據(jù)信息加載完成
    captureAfterTime: 50000,
    //忽略打包錯誤
    ignoreJSErrors: true,
    phantomOptions: '--web-security=false',
    maxAttempts: 10,
   }
  ),

遇到的問題

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

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

但是他會提示你對downloading 什么文件保存到哪個位置對吧，

VUE預渲染及遇到的坑

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

//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后面的鏈接下載下來，然后放在他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報錯

VUE預渲染及遇到的坑

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

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

npm i --save puppeteer --ignore-scripts

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

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

2. npm init

VUE預渲染及遇到的坑

3.cmd

set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1

VUE預渲染及遇到的坑

4.npm install

5.npm -i puppeteer

puppeteer下載完成

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

VUE預渲染及遇到的坑

猜你喜歡

最新資訊

相關推薦

相關標簽