vue中怎么进行网页预渲染？本篇文章给大家介绍一下vue使用prerender-spa-plugin进行网页预渲染的方法，希望对大家有所帮助！
预渲染通常情况下，vue项目是单页项目，也就是渲染出来的项目，只有一个index.html。【相关推荐：vue.js视频教程】
这样的缺点很明显：
部署到nginx，需要做try_files $uri $uri/ /index.html内部重定向，才可以用通过路由访问页面。seo不友好，搜索引擎收录效果不佳。而预渲染，就是把原来的单index.html，渲染成多个目录，每个目录又有一个index.html。这样就不需要内部重定向访问路由，也更利于搜索引擎收录。
prerender-spa-plugin本次预渲染使用prerender-spa-plugin进行预渲染。
它的主要原理是启动浏览器，渲染完成后抓取html，然后再创建目录，保存为index.html。
注意：
官网目前只有vue2.x的demo，实际上是支持vue3的（本次演示也是使用vue3）虽然最近的一个发布版本是2018年（最近应该会发布新版本），但是一直有维护，可以使用。安装
首先，我们用npm进行安装：
npm i prerender-spa-plugin
需要注意，因为prerender-spa-plugin会安装一个chromium，所以安装会比较久。
当然，这种依赖，只有在打包时候才使用。所以，更好的安装方式，应该是：
npm i prerender-spa-plugin -d
项目引用现在，我们就来项目引用，使用方法很简单，方便在两个地方追加：
app.vuevue.config.jsapp.vue
首先，我们在app.vue内追加触发器事件：
mounted() { document.dispatchevent(new event('render-event'))}
添加这个触发器，是后续打包时候，会自动触发，并完成渲染。
vue.config.js
根据prerender-spa-plugin项目文档：
const path = require('path')const prerenderspaplugin = require('prerender-spa-plugin')module.exports = { plugins: [ ... new prerenderspaplugin({ // required - the path to the webpack-outputted app to prerender. staticdir: path.join(__dirname, 'dist'), // required - routes to render. routes: [ '/', '/about', '/some/deep/nested/route' ], }) ]}
同时一些高级使用需要引入puppeteerrenderer进行自定义。所以，我自己的vue.config.js配置：
module.exports = { …… chainwebpack: config => { if (process.env.node_env == "development") { …… } if (process.env.node_env == "production") { config.plugin("prerenderspaplugin").use('prerender-spa-plugin', [ { staticdir: path.join(__dirname, 'dist'), routes: [ '/', '/processimg', '/statisticschars', '/generatepwd', '/calculatethedate', '/randomnumber', '/textbase64', '/curl', '/mcstatus', '/gh', '/about', '/mdv' ], renderer: new puppeteerrenderer({ headless: false, executablepath: '/applications/google chrome.app/contents/macos/google chrome', // 对应app.vue renderafterdocumentevent: 'render-event', }), }]) ]) } }
我使用的是链式函数。这样的好处，是方便我进行if-else等函数式判断。其中，renderer属性：
headless：这个就是chrome的headless属性，常用于debug。更多可以参考：google chromeexecutablepath：重定向浏览器地址；我这里重定向使用我电脑自带的chrome浏览器了。（可选，可以直接不加，默认调用chromium）renderafterdocumentevent：需要同app.vue中 document.dispatchevent(new event('render-event'))的事件名称要对应上。而routes数组，里面就是需要预渲染的路由地址。
当然，更多的可选参数，你也可以参考官方的文档：
staticdir需要指向编译后的输出文件夹。
打包项目之后，我们就可以打包项目了：
npm run build
打包后的效果：
看看预渲染的页面：
因为我有使用vue-meta的组件，所以预渲染的文件也就有meta属性了。
如果你也想用vue-meta组件配合prerender-spa-plugin，可以参考文章：
https://juejin.cn/post/7056972997894094861
需要注意，如果出现什么错误，可以尝试：
# 删除项目node_modulesrm -rf node_modules# 重新安装npm install
这样的文件，就可以进行部署了。
部署效果我们使用nginx进行部署，上次到nginx web文件夹内，修改config文件，就不需要：
location / { try_files $uri $uri/ /index.html;}
来实现内部重定向了。因为有真实的目录，可以去掉。
但是，数据代理，最好使用nginx来实现。比如，开发环境，数据代理：
config.devserver.proxy({ '/dataapijava': { target: javabaseurl, pathrewrite: {'^/dataapijava': ""}, ws: true, changeorigin: true }, '/dataapipython': { target: pythonbaseurl, pathrewrite: {'^/dataapipython': ""}, ws: true, changeorigin: true }, '/ghs': { target: githubspeedurl, pathrewrite: {'^/ghs': ""}, ws: true, changeorigin: true } })
对应的nginx配置，可以这样写：
location /dataapipython/{ proxy_pass http://127.0.0.1:8099/; proxy_set_header host $host; proxy_set_header x-real-ip $remote_addr; proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for; proxy_set_header remote-host $remote_addr; add_header x-cache $upstream_cache_status;}location /dataapijava/ { proxy_ssl_server_name on; proxy_pass https://…….cn/;}location /ghs/ { proxy_ssl_server_name on; proxy_pass https://……/gh/;}
给大家展示三种配置，按需设置哦。
end到此，我们的前端预渲染就完成了。这样seo好。但是对比ssr，还是优点欠缺。好处就是部署和配置方便，坏处就是构建麻烦，如果你页面有几十个路由需要预渲染，那么prerender-spa-plugin渲染起来就没ssr方便了。
改天有机会和大家分享分享ssr吧,真不错，又挖一个坑。
另外，是不是有小伙伴好奇，我截图里出现的compressionplugin属性？其实是gz压缩啦。有机会和大家分享，使用compression-webpack-plugin来优化项目。
更多编程相关知识，请访问：编程入门！！
以上就是vue中怎么进行网页预渲染？prerender-spa-plugin的用法浅析的详细内容。