使用vue-cli v3.0部署Vue到GitHub Pages时vue-router异常问题

我之前也碰到过一模一样的情况！不用路由就正常，一用<router-view/>就空，核心问题就是vue-router的配置没适配GitHub Pages的子路径特性，下面给你一步步排查解决：

1. 先修正vue-cli的路径配置（别再用baseUrl了！） #

vue-cli 3.x里baseUrl已经被废弃，改用publicPath，你需要在vue.config.js里明确设置为你的仓库名称（比如你的仓库地址是https://github.com/your-name/your-repo，那publicPath就是/your-repo/）：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/your-repo-name/'
    : '/'
}

这样打包后的资源路径会自动加上仓库名，既解决资源找不到的问题，也能让路由识别正确的根路径。

2. 给vue-router配置正确的base路径 #

在路由配置文件（一般是src/router/index.js）里，让路由的base属性自动读取上面的publicPath，同时根据GitHub Pages的特性选择合适的路由模式：

• 推荐用hash模式（默认模式，路径带#）：
  这种模式最省心，GitHub Pages完全支持，不会有刷新404或者路由失效的问题：

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import Home from '../views/Home.vue'
  
  Vue.use(VueRouter)
  
  const routes = [
    { path: '/', name: 'Home', component: Home },
    // 其他路由配置...
  ]
  
  const router = new VueRouter({
    base: process.env.BASE_URL, // 自动读取vue.config.js的publicPath
    routes
  })
  
  export default router
  

• 如果坚持用history模式（路径不带#）：
  除了设置base，还要额外做两步：

  1. 在打包后的dist文件夹里复制一份index.html，重命名为404.html（GitHub Pages碰到不存在的路径会跳404，用这个文件让路由重新解析路径）；
  2. 确保仓库的GitHub Pages设置里，源选择gh-pages分支的根目录。

3. 检查路由的兜底规则 #

如果上面的配置都做了还是空，大概率是没有匹配到任何路由！一定要加一个默认路由兜底：

const routes = [
  { path: '/', name: 'Home', component: Home },
  // 其他路由...
  { path: '*', redirect: '/' } // 把所有不匹配的路径重定向到首页
]

这样就算路径写错了，也不会出现<router-view/>为空的情况。

4. 重新构建部署 #

修改完配置后，重新打包再推送到gh-pages分支：

npm run build
git subtree push --prefix dist origin gh-pages

按这个流程走下来，你的<router-view/>应该就能正常渲染内容了！

内容的提问来源于stack exchange，提问作者guizo