查阅各种办法和百度，仔细阅读文档后，经过了逐项测试，得出一结论，实践出真知
在我看来，[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事件然后开始渲染了，跟文档介绍的一摸一样，我测试却没有用，可能是我的项目没有这个问题吧，我觉得无用就删掉了
