🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
查阅各种办法和百度,仔细阅读文档后,经过了逐项测试,得出一结论,实践出真知 在我看来,[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事件然后开始渲染了,跟文档介绍的一摸一样,我测试却没有用,可能是我的项目没有这个问题吧,我觉得无用就删掉了