1.为什么预渲染对SEO更好，方便爬虫爬取2.核心插件npmiprerender-spa-pluginnpmipuppeteer3.vue.config.jsconstwebpack=require('webpack');constpath=require('path');constPrerenderSPAPlugin=require('prerender-spa-plugin');constRenderer=PrerenderSPAPlugin.PuppeteerRenderer;module.exports={configureWebpack:config=>{如果(process.env.NODE_ENV==='production'){//修改生产环境的配置...return{plugins:[//PrerenderconfignewPrerenderSPAPlugin({//webpack-outputapppre-render的要求路径.staticDir:path.join(__dirname,'dist'),//必填，要渲染的路由地址。routes:['/','/us'],//必填，实际使用的renderer，如果没有，预编译renderer:newRenderer({inject:{foo:'bar'},headless:true,//渲染时显示浏览器窗口。对调试有用（true不显示弹窗，false显示弹窗）//等待渲染，直到检测到指定元素。//例如在项目入口处使用`document.dispatchEvent(newEvent('custom-render-trigger'))`renderAfterDocumentEvent:'render-event',//executablePath:'/usr/bin/google-chrome'(chromium执行文件地址)})}),],}}else{//配置开发环境}}};4.main.jsnewVue({router,render:h=>h(App),mounted(){document.dispatchEvent(newEvent('render-event'))}}).$mount('#app')5.Router.js必须设置模式：“history”模式6.npmrunbuildpackage，如果生成了那里是dist目录下每个配置的路由名对应的文件夹，里面的index.html有内容，代表成功。七、遇到的问题1、第一次本地打包后，报错Chromiumrevisionisnotdownloaded。运行“npminstall”或“yarninstall”发现找不到通过npmipuppeteer安装的Chromium，重试了几次也没有用。看到PuppeteerApi文档的时候，发现他可以通过设置executablePath来指定Chromium的版本。默认情况下Puppeteer会自动下载Chromium以保证正常使用。如果找不到路径，可以设置executablePath来指定路径。路径地址是Chromium可执行文件的路径。2.部署上linux服务器提示找不到Chromium文件，于是下载了linux版本的Chromium，将executablePath重新设置为linux下Chromium执行文件的地址。打包时提示Chromium打不开，所以设置headless为true，默认不打开图形界面。4、部署成功后，进入网站可以显示界面，但是所有事件都不起作用。打开控制台，发现缺少默认的绑定ID，于是修改根目录文件加上ID
