如何將nuxt項目部署到github pages (碼雲 pages) 上

前言：此文章包括了以下幾點：

1：如何部署
2：部署到Page后，靜態資源加載報404
3：從默認頁面跳轉到其他頁面報404
4：github Pages上的頁面打開特別慢。

一：使用Nuxt.js腳手架工具create-nuxt-app快速創建項目

1：確保安裝了npx（npx在NPM版本5.2.0默認安裝了）：

npx create-nuxt-app <項目名>

后續選項可以自己跟實際情況選擇。

二：在github上新建倉庫

1：選擇右上角新建一個倉庫

 

 

 2：填選項

 

 

 3：本地找個文件夾，git clone 此倉庫

 

 

 4：上傳本地的代碼

三：如何使用github pages

1：你的nuxt項目在本地跑一遍generate

npm run generate

這個時候本地打包了一個dist文件夾，里面是你的靜態資源。

2：在github上打開你的項目，選擇settings，拖到github pages那塊。此時你會發現默認的是none。

 

 

 

 

 

 

 3：選項的意思：

• master branch是選擇你master分支下，項目根目錄的那個html文件。如果沒有index.html就不行
• master branch/docs folder 是選擇你master分支下，docs目錄下的那個index.html。
• 如果你后期添加了其他分支，也會多相應的選項

當你選擇某個分支后，github pages哪里就會多個鏈接，就是你想看到了靜態資源的頁面

 

 

 

4：在nuxt.config.js中修改配置，把輸出資源的目錄改為docs。然后執行npm run generate。

 

 

 5：提交資源到github上。然后打開setting里的鏈接，（記住要選擇master branch/docs folder ）。這個時候網頁上顯示了我們的項目

 

問題一：html中引用的js文件，img，a標簽資源地址都是類似以下這種，導致引入不了文件

<script src="/_nuxt/e70f9a4d666a9e55ebb0.js" defer>

　　解決：配置router參數。這個時候我們npm run dev的時候，本地項目的地址是http://localhost:3000/nuxt-blog/

 

 這里的/nuxt-blog是我的項目名，也是github pages后面的項目名

 

 

問題二：當我頁面有很多時,執行npm run generate后，會發現除了首頁外，其他的頁面都會打包成 '文件夾 / index.html'的形式，導致我們頁面路由跳轉時，頁面報404.這個時候我們需要接着配置nuxt.config.js

 

 

 

 打包上傳后，你會發現你的項目可以正常運轉了。

問題三：github pages頁面打開太慢怎么辦？

解決：用國內的碼雲，所有步驟都和github一樣。只有Pages這個功能放的地方不一樣。 碼雲的Pages服務是收費的，你可以免費試用一個月。