?步驟：

? ? 1.安裝? ??prerender-spa-plugin

? ? 命令為：npm install prerender-spa-plugin -D

? ? 2.把router里的mode模式改成history

????2.找到build下的webpack.prod.conf.js

3.在頭上寫

const PrerenderSPAPlugin = require('prerender-spa-plugin')

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

4.在plugins里面添加

new PrerenderSPAPlugin({

? ? ? // 生成文件的路徑，這個(gè)目錄只能有一級(jí)。若目錄層次大于一級(jí)，在生成的時(shí)候不會(huì)有任何錯(cuò)誤提示，在預(yù)渲染的時(shí)候只會(huì)卡著不動(dòng)

? ? ? staticDir: path.join(__dirname, '../dist'),

? ? ? // 對(duì)應(yīng)自己的路由文件（數(shù)組形式哦！）

? ? ? routes: [ '/', '/app', '/PackageOffer', '/proAllnetShow' ],

? ? ? // 若沒有這段則不會(huì)進(jìn)行預(yù)編譯

? ? ? renderer: new Renderer({

? ? ? ? // 觸發(fā)渲染的時(shí)間，用于獲取數(shù)據(jù)后再保存渲染結(jié)果

? ? ? ? // renderAfterTime: 10000,

? ? ? ? inject: {

? ? ? ? ? foo: 'bar'

? ? ? ? },

? ? ? ? headless: false,

? ? ? ? // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對(duì)應(yīng)上。

? ? ? ? renderAfterDocumentEvent: 'render-event'

? ? ? })

? ? }),

5.在config下的index.js中? ? assetsPublicPath:'/'(這樣樣式會(huì)不見)

沒點(diǎn)?

有點(diǎn)

6.執(zhí)行npm run build

ps:? ? ?可是我還是遇到了報(bào)錯(cuò)

請(qǐng)注意紅框

百度發(fā)現(xiàn)是沒有puppeteer? 微笑臉哦！??

速速安裝了npm install puppeteer?

嗯哼? 重新build? ? ok? ? （但是發(fā)現(xiàn)哦，出來的index.html里面的東西不能點(diǎn)擊，嗯，下次再說這個(gè)問題）