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

时间:2021-10-10 03:49:47

  今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于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的源码,发现一个地方

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

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

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

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

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