本文共 2921 字，大约阅读时间需要 9 分钟。

好长时间没有写博客了，这个月的18号才写这个月的第一篇，回首一看这个月发生了好多事情。换工作、加班都没有时间和没有好的东西可以写。最近公司的项目中有一个非常重要的功能就是seo的优化，这个东西堵了一段时间，中间还去请教了好些人都没有得到好的解决办法。后来自己通过webpack和prerender-spa-plugin第三方插件这两个工具配合使用来实现曲线就救国。

问题描述

传统的vue通过vue-cli脚手架搭建完成后要通过npm run build来打包生成最后的要放到线上的html代码。

vue搭建的单页面项目有各种优点，易维护、代码简洁、开发体验好等等。但是对于一些传统的互联网公司，vue单页面却有一个很致命的问题就是seo优化的问题。下面是正常打包的vue单页面目录以及index.html的代码。

目录只有一个index.html文件并且这个html文件里面是没有任何内容的只有一个id为app的用来挂载vue实例的div。 谷歌搜索引擎已经可以很好地支持单页面的信息爬取，但是谷歌是国外的国内使用要翻墙所以不作考虑，百度是国内最主要的搜索引擎，百度并不能爬取单页面的数据所以这样的项目如果上线了别人在百度搜索的时候很难找到这个项目。由于我目前公司的大部分项目都是需要做seo优化的所以这个问题就丢到了我这里。

解决办法

这里先提一下如果打包的时候报错可能你需要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

最后mian.js入口文件中要加入这段代码。其中render-event要和vue.config.js中的renderAfterDocumentEvent对应

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

npm run build现在打包之后的目录结构就变成了这样了，以及每个文件夹的index.html代码，

现在的html代码就有了.vue文件中的template相关代码，但是却多了一个问题就是每个文件夹中的index.html代码都引用了所有的js和css文件这是不利于seo优化的。因此还没有结束。

为什么会有这么多js和css呢，因为vue-cli在打包的时候每个.vue文件的script和style标签都会打包成一个对应的js和css，即使你标签里面什么都没有写。

第二步我想到的解决办法是压缩合并体积比较小的js和css文件

找了vue-cli的文档没有搜索到相关的资料，因此转战 这个api可以用来设定一个最小的合并文件体积，在上边的webpack配置中的plugins中加入这段代码目测是10000=1kb  

const webpack = require('webpack');new webpack.optimize.MinChunkSizePlugin({                    minChunkSize: 10000 // 通过合并小于 minChunkSize 大小的 chunk，将 chunk 体积保持在指定大小限制以上                }),

然后npm run build

还是那个目录，但是js和css缩减了很多。

总结

总的来说过程很操蛋，但是结果还是很美好的，技术上有提升了一步。这段时间一不留神我那两个后端的兄弟一个要写书，一个博客专家了哈哈看来我要抓紧了啊

！！！加油！！！

转载地址：http://nalhn.baihongyu.com/