vue项目打包后挂载在服务器的根目录上显示没问题，但是挂载在子目录下就会显示空白

首先是要先想清楚一点是：我们Vue项目的前端路由和服务器上的路由是两个不同东西，前端路由只是作用在浏览器端，在浏览器端实现跳转，但是它和服务器端的路由是不一致的。

说的有点绕。拿我的项目举个例子：我们前端Vue有个路由路径是https://lxz612.github.io/Gank/meizi，这是由于Vue路由路径 https://lxz612.github.io/Gank/index 跳转过来的，并不是从服务器请求来的，所以如果你单纯访问 https://lxz612.github.io/Gank/meizi 是会不行的，会报404。除非你在服务器端做个映射，那就另当别论。那为什么 https://lxz612.github.io/Gank/index 可以访问呢，因为index.html是放在根目录下（git项目的根目录是 https://lxz612.github.io/Gank ），index是服务器默认映射的路径。

所以我当时是没想通这个问题，把前端路由和服务器路由混在一起来。我只要把路径配置好就可以（在我项目的router.js）

//定义路由规则
export default function(router) {
    //路由映射
    router.map({
        '/Gank': { //启动页
            name: 'start',
            component: function(resolve) {
                require(['./views/start.vue'], resolve);
            }
        },
        '/Gank/index':{//首页
            name: 'index',
            component: function(resolve) {
                require(['./views/index.vue'], resolve);
            }
        },
        '/Gank/meizi':{//纯妹子
            name:'meizi',
            component:function(resolve){
                require(['./views/meizi.vue'],resolve);
            }
        }
  });
}

还有要配置下 webpack.config.js 的 publicPath

 output: {                                //输出配置
    path: __dirname + '/dist/',            //生成文件的存储路径
    filename: 'build.js',                  //生成的文件名
    publicPath: '/Gank/dist/',             //路由路径
    chunkFilename: '[id].build.js?[chunkhash]'               
  },

啰嗦这么多，希望能帮到你！

lxz612 / Gank

vue项目打包后挂载在服务器的根目录上显示没问题，但是挂载在子目录下就会显示空白 #1