为什么要做seo优化
相比于传统多页面项目,vue,react等之类的单页面应用(spa)对网络爬虫不友好
因为网络爬虫只能识别网页内容(html),并不能抓取js,而spa应用主要是靠js的跳转来实现的
vue项目的seo优化方式
1.SSR(服务端渲染),使用Nuxt.js,适用于从零开始搭建项目时使用
2.预渲染,使用prerender-spa-plugin,在已完成的项目的基础上,适用于某几个页面需要进行seo优化
3.prerender-node(不是很清楚)
本文介绍使用预渲染实现seo优化
1.安装prerender-spa-plugin
npm i prerender-spa-plugin --save -D 2.在webpack中配置
如果项目是vue-cli2搭建的,找到 build/webpack.prod.conf.js
配置代码:
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const baseWebpackConfig = require('./webpack.base.conf') const PrerenderSPAPlugin = require('prerender-spa-plugin') const Renderer = PrerenderSPAPlugin.PuppeteerRenderer const webpackConfig = merge(baseWebpackConfig, { plugins: [ // vue-cli生成的配置中就已有这个了，不要动 new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency' }), // 在vue-cli生成的文件的基础上，只有下面这个才是我们要配置的 new PrerenderSPAPlugin({ // 生成文件的路径，也可以与webpakc打包的一致。 // 下面这句话非常重要！！！ // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。 staticDir: path.join(__dirname, '../dist'), // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。 routes: ['/', '/index', '/home', '/category'], // 这个很重要，如果没有配置这段，也不会进行预编译 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。 renderAfterDocumentEvent: 'render-event' }) }) ] }) 3.在 webpack.prod.conf.js 配置完成之后，然后再 main.js 里改成如下所示
new Vue({ el: '#app', router, store, render: h => h(App), /* 这句非常重要，否则预渲染将不会启动 */ mounted () { document.dispatchEvent(new Event('render-event')) } }) 4.打包一下,npm run build, 看下是否dist文件夹下有路由对应名称的文件夹,然后找个文件夹打开里面的index.html,在浏览器右键查看源代码中查看是否有HTML代码,有的话,就成功了
原文链接：https://www.cnblogs.com/zoo-x/p/11671463.html
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/22205
