今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于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 然后又尝试了一波。
发现问题居然巧妙的解决了!!!!
至于开发模式的时候使用服务端渲染也没什么大的作用,所以就没有去研究了,就只是把编译的时候弄了。希望对大家有用把。