const path = require('path')
const PrerenderSpaPlugin = require('prerender-spa-plugin')
// ...
// ...
configureWebpack: {
    plugins: [
        new PrerenderSpaPlugin(
            // npm run build的输出目录
            path.resolve(__dirname, './raw'),
            // 需要进行预渲染的页面
            ['/', '/about'], {
                captureAfterTime: 5000,
                maxAttempts: 10,
            }
        )
    ]
}

上述配置大意是到相应的目录，根据router的信息将有关的页面预先加载渲染成静态页面，并且将静态页面以独立文件夹的形式保存下来。

下图是没有prerender的文件目录↓

可以看到，和普通的单页应用打包输出一样，一个index.html入口，动态渲染各个页面。

使用prerender之后的目录则是这样的↓

多出了一个about文件夹，里面有一个index.html文件，这里就是'/about'页面的静态页，这样我们通过url访问时就是直接访问about的静态页，而不需要再让浏览器编译这个页面。这样一来，搜索引擎就可以直接爬到我们页面的所有内容，而不是一个单页应用的启动页！

然后在根目录的index.html也变成'/'页面的静态页，这样一来就完成了我们官网页面的静态化，就是这么简单~因为prerender-spa-plugin的核心人员也是vue的核心人员，所以在vue项目里面用起来显得十分顺畅，不过如果是大型项目的话可能还是要往SSR方向去走。

小插曲:nginx的重定向

在完成某个线上项目的重构之后需要注意一些"蝴蝶效应"--

以我们的官网为例，之前一些公司介绍被百科收录了，收录的来源链接是旧的静态页链接--"xxx/about.html"，一访问就凉了，页面已经不存在了。

一开始打算写个空的html负责跳转，但是后面想想这样不利于页面的seo，所以就想到是不是可以利用nginx的重定向解决这个问题。这里其实花了不少时间，刚开始写的时候是在location里面对相应的路径进行重定向，但是发现效果不理想。后面，东查查西查查，发现可以用rewrite来解决这个问题。

server {
    listen ......
    ......

    rewrite ^about.html https://targetlink.com/about/ permament;

    location / {...}
}

在nginx里面加入这个就可以将"xxx/about.html"这个链接永久重定向至目标url了，就不需要再写一个“跳板”页面了。

总结

关于SPA的SEO是永恒的话题，解决的方案其实不多，因为既然决定了使用SPA就代表该项目对SEO并没有强需求，但是如果是本文的背景下，我们就需要思考最便捷、无痛的解决方案。

SSR自然是首当其冲的方案，但是实在是伤筋动骨，得不偿失，不如重写成静态页。后面发现预渲染这个方案十分适合我们，所以就尝试了一下这个方案，在尝试这个方案的过程中，我也试了下gitlab的自动部署这又是另外一个坑了，在近期应该会有另外一篇文章来讲讲这个坑~

发布于 2020-03-24 23:26

Vue.js

前端开发框架和库

前端开发

文章被以下专栏收录

mykurisu的前端小栈

前端开发之路的点点滴滴