vuecli3 prerender-spa-plugin配置 seo优化 预渲染

前言：使用vue-cli打包项目一般为spa项目，众所周知单页面应用不利于SEO，有ssr和预渲染两种解决方案，这里我们只讨论预渲染
vue-cli3.0版本
3.0的cli看上去简洁多了，去掉了2.0 build和config等目录，那我们怎么去修改webpack的配置呢？
在根目录下创建vue.config.js，进行你的配置。

1.安装
npm install prerender-spa-plugin --save
如果安装失败可以尝试淘宝镜像安装
cnpm install prerender-spa-plugin --save
2.vue-config.js中增加

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

}

3.在main.js中增加

new Vue({
  router,
  store,
  render: h => h(App),
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

4.router.js 中设置mode: “history”

export default new VueRouter({
    mode: 'history',
});

5.运行npm run build，看一下生成的 dist 的目录里是不是有每个路由名称对应的文件夹。然后找个 目录里 的 index.html 用IDE打开，看文件内容里是否有该文件应该有的内容。有的话，就设置成功了

特别提醒
1.vue-cli2.0和3.0的设置大致一致，但有一个很不同

在3.0中，设置staticDir: path.join(__dirname,‘dist’),

在2.0中，设置staticDir: path.join(__dirname,’…/dist’),

如果你把3.0的staticDir设置为path.join(__dirname,’…/dist’)或者把2.0的staticDir设置为path.join(__dirname,‘dist’)，运行npm run build 都会报错，这要特别注意！！！
2.细心的小伙伴会发现，不管2.0还是3.0都需要设置 history 模式，那这一步是否是必须的呢？经过测试，如果不设置history模式，其实也能运行和生成文件的，但查看每个index.html文件的内容都会是一样的。所以这一步是必须的
如果你想修改每个页面的meta 信息，这里推荐使用 vue-meta

本文引自 原作：阿尔法乀