vue项目实现seo优化之使用预渲染，prerender-spa-plugin

为什么要做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代码,有的话,就成功了