查閱各種辦法和百度，仔細閱讀文檔后，經過了逐項測試，得出一結論，實踐出真知
在我看來，[prerender-spa-plugin]([https://github.com/chrisvfritz/prerender-spa-plugin#readme](https://github.com/chrisvfritz/prerender-spa-plugin#readme))的很多屬性都是沒有太大用處的，還帶來了很多的誤導，下面是我在實際項目中實踐出來的，插件最簡用法，當然有一些地方可能用不到，但有些復雜項目中確實可以用到，具體解釋寫在注釋中
```
// 首先，這是插件的入口
new PrerenderSPAPlugin({
// 這個文件夾路徑的作用是應用程序服務啟動路徑，
// 插件的工作方式：另啟動一個webpack-dev-server服務，將完整的項目運行在無頭瀏覽器中，
// 再使用puppeteer把對應路由的頁面爬取下來，可以細想一下，構建過程中的文件去哪了，難道是刪除了，
// 聯想一下開發模式運行項目情況就知道了
// 而staticDir就是這個webpack-dev-server的運行根目錄
staticDir:path.join(__dirname,?'../dist'),
// indexPath在一般的單頁項目中是不需要的，因為項目的首頁默認就在dist目錄根路徑
// 當build后首頁不在根目錄的時候，就需要具體指定，不指定的結果就是Not found
// indexPath:path.join(__dirname,?'../dist/index/index.html'),
// outputDir 屬性作用其實不大，當你想把預渲染出來的頁面統一放置到一個位置時使用
// 比如：后端想控制搜索引擎爬蟲爬取這些文件
//?outputDir:?path.join(__dirname,?'../dist/prerendered'),
// routes 為你希望渲染的路由，要與你的項目router一致，太復雜的參數，還是別渲染了
// 其他的使用方式可以自己探索測試一下
routes:?[?'/',?'/shop',?'/advisory',?'/about'?],
// 這是預渲染后的靜態頁minify模式，移除空格換行之類的縮小文件大小
minify:?{
collapseBooleanAttributes:true,
collapseWhitespace:true,
decodeEntities:true,
keepClosingSlash:true,
sortAttributes:true
},
// server 屬性在純靜態的頁面中是不起作用的，他的作用僅限于你項目中有數據請求是從接口哪里拿到的
// 防止插件運行過程中因為數據拿不到導致報錯，渲染失敗情況
server:?{
// 這里還有一個port的屬性，非必需的情況下還是不要指定了，服務運行端口會占用，不影響插件運行
// proxy 接口代理，與vue的devServer相同
proxy:{
'/api':?{
target:'http://www.qyyt.com',
changeOrigin:true,?//是否跨域
},
}
},
// postProcess 后處理，渲染完畢后做些什么，
// 我這里因為項目中使用了懶加載，需要剔除項目生成文件中的因為渲染過程重復插入的script標簽，
// 不剔除會造成最終文件在打開后控制臺報錯，webpackJsonp not is function類似錯誤
postProcess?(renderedRoute)?{
renderedRoute.html?=?renderedRoute.html.replace(//g,function?(target)?{
console.log(chalk.bgRed('\\n\\n剔除的懶加載標簽:'),?chalk.magenta(target))
return''
});
return renderedRoute
},
// 這是渲染啟動的入口，必須
// 啟動puppeteer開始抓取
renderer:newPrerenderSPAPlugin.PuppeteerRenderer({
// slowMo、devtools、maxConcurrentRoutes、headless這四個配置跟調試關系重大，
// 讓你發現無頭瀏覽器渲染過程中發生了什么
// slowMo延遲渲染每一步，1000為時間1秒
//?slowMo:?1000,
// 渲染前先打開控制臺
//?devtools:?true,
// 最多每次渲染的路由數量 單位個
//?maxConcurrentRoutes:?1,
// 調試過程中要把headless設置為false，表示在有頭瀏覽器中渲染，上面的也依賴于此
// 在線上構建過程中，要設置為true，無頭模式，服務器是沒有屏幕讓你看的
headless:true,
// 這是瀏覽器的視口配置，大多情況設置為與電腦屏幕一致
// 不然渲染出來的靜態文件就會偏小，留有一部分白屏
defaultViewport:?{
width:1920,
height:950,
deviceScaleFactor:1,
isMobile:false,
hasTouch:false,
isLandscape:false
},
})
})
```
以上就是插件中的重要配置了，像網上許多文章中說的什么延時渲染5000，什么頁面加載完觸發一個render事件然后開始渲染了，跟文檔介紹的一摸一樣，我測試卻沒有用，可能是我的項目沒有這個問題吧，我覺得無用就刪掉了
