vue-cil3 Pages部署頁面空白及重新整理404問題

靜態資源載入失敗

• 原因：資源路徑不對，通常沒有加上倉庫名，檢視網路資源裡當前路徑與資源路徑的差異
• 解決方法：在專案根目錄新建 vue.config.js 檔案，配置publicPath

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/倉庫名（差什麼放什麼）/' 
    : '/'
}
複製程式碼

資源載入成功，但頁面空白[div#app裡面是空的]

• 原因：路由是history模式，路由的路徑整不對
• 解決方法1：把路由改成hash，注掉就完事了呢

// src/router/index.js    
const router = new VueRouter({
    routes,
    // mode: 'history'
})
複製程式碼

• 解決方法2：還是用history，給路由加一個base路徑，與publicPath一致

// src/router/index.js   
const router = new VueRouter({
    routes,
    mode: 'history',
    base: '/vue-wx/'
})
複製程式碼

history模式下重新整理就404

• 原因：前端路由並不是真的路由，實際路徑裡沒有資源，所以請求不到。vue-router文件【HTML5 History 模式】
• 解決方法：需要配合後端，前端可以做 404.html 重定向請求。
• gitee Pages的解決方案：在部署目錄加.spa檔案，但我加了沒用？

附錄-pages服務單頁面部署相關

• vue-cil平臺指南
• GitHub 可以看看這篇
• 碼雲

最後

在重新學習vue的時候部署pages在各個坑裡反覆橫跳，希望能幫到和我一樣的小白。歡迎和我交流，一起進步吧。