用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

今天在做公交的时候没干，用手机看看文章，偶然发现了一个关于Vue优化seo的文章，我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章。

上面提到了nuxt.js这个框架，这个框架我做过一个小项目，确实是可以做服务端渲染，但是这个需要在服务器启动服务，当时我是用的docker，然后用node+nginx做了个容器，然后用pm2做进程守护。

后面我拿原来的Vue项目做了一个对比发现确实是加载速度要比原来的快很多。

后面我又发现有个预渲prerender-spa-plugin染的东西，然后早上到了公司，就想反正我手上也有个项目，顺便尝试一把，在尝试的时候发现这个配置更简单，效果也是一样的好。

首先需要安装包

npm i prerender-spa-plugin -S

然后就是修改 build --> webpack.prod.conf.js 的配置。

const webpackConfig = merge(baseWebpackConfig, { 。。。。。。 plugins: [ 。。。。。。 // 预渲染 new PrerenderSpaPlugin( // 生成文件的路径，此处与webpack打包地址一致 path.join(config.build.assetsRoot), // config.build.assetsRoot为vue cli生成的配置，打包后的文件地址 // 配置要做预渲染的路由，只支持h5 history方式 ['/', '/ssr'] ) ]})

然后运行npm run build 这个时候你会发现 dist 的这个文件夹会多一个ssr的文件，这个就是预处理遇到用到的，还有就是index也是跟原来的不一样的。

然后我们可以用node搭个简易的本地服务器运行下。运行后的页面跟开发环境是一样的，但是你可以右键查看源码，这个时候你会发现页面是渲染好了输出回来的。

可能会遇到的问题

我在县上的时候遇到了一个报错但是不影响正常的使用

webpackJsonp is not defined

然后我就在网上各种搜索，但是很多的方法都不行，这个的原因是应为有公共的js没有被优先引入造成的。

后面我无意间看了buid出来的index.html的源码，发现一个地方