[prerender-spa-plugin]--微型Vue項目的靜態化利器

最近和同事寫了個公司的PC官網，綜合我的開發習慣、週期以及需求，我最終選擇用vue-cli來快捷開發（由於以前已經寫好了基於vue-cli的二次定製腳手架）。上線以後，老大說了一句，仍是改回靜態頁吧，SPA的SEO太差啦。這...

本文會涉及到的內容--

• 使用prerender以前的境況介紹
• 使用prerender的姿式(踩坑)
• 小插曲:nginx的重定向
• 總結

使用prerender以前

咱們的官網是特別「純正」的vue-cli項目，也就是說這是個用webpack進行打包的單頁應用。

在路由方面選擇的是vue-router，mode是hash模式，由於並不須要考慮IE瀏覽器以及移動端瀏覽器(特別是微信這個小妖精)，因此並無特別注意路由這一塊的配置。

在頁面開發方面，因爲是兩人開發，因此我傾向單個頁面分離成多個組件的開發模式，這樣既不互相干擾，後續改動或複用也相對靈活。

balabala...沒過幾天，咱們的官網順利上線啦，除了url裏面會帶一個"#"以外，貌似沒啥不妥的地方。直到老大在羣裏吐槽url醜&非靜態頁，而後讓我改用靜態頁T T

這讓我陷入沉思...

• 改用HTML/CSS/JS重寫一次？
• 用Nuxt進行SSR?
• 還有啥辦法...

也不知道爲啥，忽然想起來以前看過一個預渲染的webpack插件:)

prerender-spa-plugin登場

prerender-spa-plugin是什麼？不太瞭解的童鞋能夠傳送門傳走看看--prerender-spa-plugin Github && vue服務端渲染中的介紹

history模式

將原來的hash模式改爲了history模式，拋棄了醜醜的"#"而且也爲prerender作鋪墊，若是是hash模式的話可能沒有辦法正常的進行預渲染。

webpack配置

由於咱們用的是新版的vue-cli，webpack配置文件已經沒有暴露出來了，咱們須要經過修改vue.config.js來更改咱們的webpack配置（其中應該是藉助了webpack-merge插件來實現配置的整合）

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方向去走。

下圖爲chrome中訪問官網首頁的源代碼--

小插曲:nginx的重定向

在完成某個線上項目的重構以後須要注意一些"蝴蝶效應"--

以咱們的官網爲例，以前一些公司介紹被百科收錄了，收錄的來源連接是舊的靜態頁連接--"xxx/about.html"，一訪問就涼了，頁面已經不存在了。

一開始打算寫個空的html負責跳轉，可是後面想一想這樣不利於頁面的seo，因此就想到是否是能夠利用nginx的重定向解決這個問題。

這裏其實花了很多時間，剛開始寫的時候是在location裏面對相應的路徑進行重定向，可是發現效果不理想。後面，東查查西查查，發現能夠用rewrite來解決這個問題。

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

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

    location / {...}
}
複製代碼

在nginx裏面加入rewrite這行就能夠將"xxx/about.html"這個連接永久重定向至目標url了，就不須要再寫一個「跳板」頁面了。

總結

關於SPA的SEO是永恆的話題，解決的方案其實很少，由於既然決定了使用SPA就表明該項目對SEO並無強需求，可是若是是本文的背景下，咱們就須要思考最便捷、無痛的解決方案。

SSR天然是首當其衝的方案，可是實在是傷筋動骨，得不償失，不如重寫成靜態頁。後面發現預渲染這個方案十分適合咱們，因此就嘗試了一下這個方案，在嘗試這個方案的過程當中，我也試了下gitlab的自動部署這又是另一個坑了，在近期應該會有另一篇文章來說講這個坑~