预览不了的主要问题基本都是打包后的js和css请求路径不对,默认是/根路径,但是打包到github上的时候,根目录下是肯定没有css和js文件的,都打包到dist文件夹里了,即使你把dist里的文件全部复制到外面放,也依旧请求不到资源,因为github上的根目录并不指向当前仓库。
这个时候就需要改一下vue.config.js的配置了
首先来看看vue-cli官方文档,主要看红色框框的这段
这里提示我们需要把publicPath改为指定的路径,我查看了github上的根目录默认是https://xxxxxx.github.io/这个样子的(其中xxxxxx是你的用户名,每个人的不一样),假设我的项目打包后的dist文件夹需要上传到了名为Test仓库,那么在vue.config.js下publicPath就要改为
publicPath: '/Test/dist/'
然后重新打包一下,此时的dist在本地serve是预览不出来的,因为本地没有/Test/dist/这个路径,但是在github上就可以预览了