Vue 单页面应用如何做 SEO 优化 （vue-meta-info + prerender-spa-plugin）

上周想给自己做的网站做一下seo优化，因为这个网站是用vue做的，所以首先就得先解决单页面的seo问题.

网上有好几种方案：

1、使用服务器端渲染（很多大厂都在用）

2、使用vue-meta-info 配合 prerender-spa-plugin 预渲染

由于以前并没有接触过服务器端渲染，所以改造起来可能比较麻烦，所以选用了预渲染作为解决方案；

vue-meta-info 的安装和使用是相当简单的，建议大伙直接去官网看看就行了，它主要的职责就是为每个页面动态生成 title、meta 和 link 等标签。

主要是prerender-spa-plugin 安装和使用有点东西，它所做的预渲染就是当vue-cli构建的项目进行npm run build 的时候，会按照路由的层级进行动态渲染出对应的html文件，这样爬虫在爬取页面的时候就不会再是一个简简单单的 index.html 入口文件了。

This is the stable 3.x version of prerender-spa-plugin based on puppeteer.

// prerender-spa-plugin 的 3.x版本基于 puppeteer

在安装prerender-spa-plugin时 会发现 进度一直停在 build  puppeteer 上，那是因为puppeteer 默认的源 下载太慢了，我们可以直接先使用淘宝源安装上 puppeteer ，再回过头来安装prerender-spa-plugin，就容易安装成功了。

使用命令：

npm config set puppeteer_download_host=https://npm.taobao.org/mirrors
npm i puppeteer

接下来是配置，因为我用的vue-cli3 脚手架，所以官网上的配置还需要琢磨一下，

修改 vue.config.js :

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');

module.exports = {
configureWebpack: () => {
        if (process.env.NODE_ENV !== 'production') return;
        return {
            plugins: [
                new PrerenderSPAPlugin({
                    // 生成文件的路径，也可以与webpakc打包的一致。
                    // 下面这句话非常重要！！！
                    // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
                    staticDir: path.join(__dirname, 'dist'),

                    // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
                    routes: [
                        '/',
                        '/Home',
                        '/aboutUs',
                        '/FAQ',
                        '/contactUs' 
                    ],

                    // 这个很重要，如果没有配置这段，也不会进行预编译
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        headless: false,
                        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                        renderAfterDocumentEvent: 'render-event'
                    })
                })
            ]
        };
    }

}

配置完后，可以试试构建一下项目了

yarn build

如果输入的目录 dist 文件夹下生成了对应页面的多个文件夹，则恭喜你成功了!