用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的源码，发现一个地方

　　

　　这里的js是异步加载的，所以可能是异步导致了加载的顺序有问题。

　　然后我果断的把async  改成了 defer  然后又尝试了一波。

　　发现问题居然巧妙的解决了！！！！

 

　　至于开发模式的时候使用服务端渲染也没什么大的作用，所以就没有去研究了，就只是把编译的时候弄了。希望对大家有用把。