在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
因为用了vue等js的数据绑定机制来展示页面数据,爬虫获取到的html是模型页面而不是最终数据的渲染页面,搜索引擎是不回去执行请求到的js。vue的项目都是ajax请求数据,引擎爬虫进入页面获取不到文字内容,现在大多数解决方案是不采用ajax渲染数据,而是采用server端渲染,也就是所谓的SSR。 方法一、利用prerender-spa-plugin插件将单页面应用打包成多页面传统的vue通过vue-cli脚手架搭建完成后要通过npm run build来打包生成最后的要放到线上的html代码。 目录只有一个index.html文件并且这个html文件里面是没有任何内容的只有一个id为app的用来挂载vue实例的div。 解决办法 这里先提一下如果打包的时候报错可能你需要npm安装一下puppeteer(这东西有点大大概300多M) 第一步通过prerender-spa-plugin来进行vue.config.js的配置 npm isntall prerender-spa-plugin --save 这个东西是vue用来将单页面应用打包成多页面的第三方插件,安装完成之后在vue.config.js配置配置如下 const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const webpack = require('webpack'); const path = require('path'); module.exports = { configureWebpack: config => { if (process.env.NODE_ENV !== 'production') return; return { plugins: [ new PrerenderSPAPlugin({ // 生成文件的路径,也可以与webpakc打包的一致。 // 下面这句话非常重要!!! // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。 staticDir: path.join(__dirname,'dist'), // 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。 routes: ['/','/about','/store_vuex','/cssAnimate','/connectMongoDB','/childParent','/child1','/elementUI'], // 这个很重要,如果没有配置这段,也不会进行预编译 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。 renderAfterDocumentEvent: 'render-event' }) }) ], }; } } 然后要将vue路由的模式改成history new Vue({ router, store, render: h => h(App), mounted () { document.dispatchEvent(new Event('render-event')) } }).$mount('#app') npm run build现在打包之后的目录结构就变成了这样了,以及每个文件夹的index.html代码,
为什么会有这么多js和css呢,因为vue-cli在打包的时候每个.vue文件的script和style标签都会打包成一个对应的js和css,即使你标签里面什么都没有写。 第二步我是压缩合并体积比较小的js和css文件 找了vue-cli的文档没有搜索到相关的资料,因此转战webpack const webpack = require('webpack'); new webpack.optimize.MinChunkSizePlugin({ minChunkSize: 10000 // 通过合并小于 minChunkSize 大小的 chunk,将 chunk 体积保持在指定大小限制以上 }), 然后 方法二、Vue SSR (服务器端渲染)
|
请发表评论