你的Vue.js應用無法被谷歌收錄......除非你使用Nuxt.js_Jovie

你是一個喜歡使用Vue.js的網絡開發者嗎？如果是這樣，你並不孤單；Vue.js是周圍最流行的前端JavaScript框架之一。然而，在你的網絡開發項目中使用Vue.js有一個很大的缺點。谷歌不會索引Vue.js網頁。

這是正確的；如果你想讓你的網站在谷歌搜索結果中可見，你需要使用一個不同的框架。事實上，任何其他前端框架，如Angular或React，都是這種情況。

但是不要擔心，有一種方法可以使用Vue.js，並且仍然可以使你的網站被谷歌索引。解決方案是使用Nuxt.js，一個基於Vue.js的服務器端渲染框架。

在這篇博文中，我們將討論為什麼單頁應用程序不能被谷歌索引，以及你如何使用Nuxt.js來創建一個使用Vue.js的SEO友好型網站。

為什麼SPA不能被谷歌索引？

你有沒有檢查過用任何現代前端框架構建的SPA的HTML標記？如果你有，你可能已經注意到，你無法真正看到組成應用程序的任何元素。相反，你將只看到一個單一的

元素。

這是為什麼呢？原因是，SPA是用JavaScript創建的，你的應用程序的內容是由這種語言動態生成的。這給谷歌帶來了一個問題，因為它的機器人在抓取你的網站時不能執行JavaScript。因此，他們不能看到（並因此索引）你的SPA的內容。

這意味着谷歌的爬蟲無法訪問單頁應用程序的內容，這使得它們在搜索結果中不可見。

因此，如果你用Vue建立了一個網絡應用，並希望它能夠在任何搜索引擎上獲得排名，你就需要找到一個解決方法。然而，有一個相當簡單和優雅的解決方案：使用Nuxt.js。

Nuxt.js是一個基於Vue.js的框架，但它有一個關鍵的區別：它生成靜態的Web應用程序。這起初聽起來可能有悖常理，但它實際上有很大的意義。

原因是，由於Nuxt.js應用程序是靜態的，它們不需要依靠JavaScript來生成它們的內容。相反，內容是在構建時生成的，然後作為HTML提供給用户。

這聽起來像是一個很大的限制，但實際上並不是。絕大多數網絡應用程序不需要動態生成它們的內容；它們可以在構建時同樣輕鬆地做到這一點。

當然，這條規則也有一些例外，但在大多數情況下，你能夠使用Nuxt.js而沒有任何問題。

那麼，還記得我們剛剛告訴你的關於Vue應用的內容是由JavaScript實時生成的嗎？Nuxt.js解決了這個問題，它在服務器端為你的應用中的每條路線提前生成了你的HTML頁面。

這意味着你的應用中的每一個頁面都有一個獨特的URL，並且所有的HTML標記都是可見的，然後可以被谷歌的爬蟲索引。此外，Nuxt.js還具有一些功能，使其成為開發SEO友好型網站的理想選擇，例如：

簡而言之，如果你想用Vue創建一個SEO友好的網站，最好的方法就是使用Nuxt。有了這個框架，你可以得到使用Vue的所有好處（比如你可以快速建立你的應用程序），再加上創建可被谷歌索引的網站的能力。

Nuxt的另一個很酷的特點是，你甚至不需要在你的電腦上安裝一個新的軟件包。你可以使用NPX，它允許你直接從命令行創建一個新的Nuxt項目。

要做到這一點，只需打開你的終端並輸入以下內容：

powershell npx create-nuxt-app <app-name>

這將開始創建一個新的Nuxt應用程序的過程。你會被問到一些關於你的項目的問題，比如它的名字、作者等等。一旦這個過程結束，你就可以用下面的命令運行你的新應用：

powershell npm run dev

在這一點上，你可以簡單地開始在你的應用程序上工作，就像你在使用普通的Vue一樣。但是，你也可以使用Nuxt的其他功能，比如它的強大的路由器系統。

一旦你完成了，你可以使用下面的命令來生成你的靜態資產：

powershell npm run generate

基本上就是這樣了!當然，Nuxt還有很多東西比我們剛才介紹的更多，但這應該讓你對它有一個很好的瞭解。

Nuxt已經迅速成為開發者創建Vue驅動的SSR應用的首選解決方案，這些應用也被Google收錄。

這很容易看出原因；有了自動路由和預渲染等功能，Nuxt可以很容易地創建快速加載的應用程序，而且還能被世界上最流行的搜索引擎所收錄。

所以，如果你想用Vue創建一個SEO友好的網站，我們希望這篇文章能對你有所幫助!