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在各个坑里反复横跳，希望能帮到和我一样的小白。欢迎和我交流，一起进步吧。