每次vue-cli构建的项目,npm run dev时看到的页面对应的是npm run build之后dist文件夹中的index.html文件,而不是项目根目录下的index.html文件。
我第一次使用vue-cli构建的项目,在npm run build之后,在本地打开dist文件夹中的index.html文件,页面是空白的。而在本地npm run dev是完全没有问题的。更令我郁闷的是push到github上面时,dist文件都没了。
两个问题
一番摸索之后,终于找到了问题原因,我们逐一分析这两个问题。
忽略文件
对比github上和本地文件之后,发现最重要的dist文件没有被提交到github上,如下图
dist文件是npm run build执行后被编译打包生成的文件,CSS、JS、图片等文件都在dist文件中,所以该文件必须要提交到github上。
在项目根目录下有一个.gitignore文件,文件中设置一些文件名,对应的文件将不会被提交到github上面。
在.gitignore文件中,确实有dist文件名,如下图
把.gitignore文件中的dist文件名删除,然后重新push到github上就有了dist文件
路径问题
解决完上面dist文件的问题之后,打开该文件路径下的github pages预览地址,还是显示空白页,如下图
我们查看控制台,可以看到文件的路径都出现了问题,如下图
路径
这里解释一下路径问题中/、./、…/的区别:
/
以/开头的路径就是绝对路径,/是指根目录,这里的根目录在本地就是指磁盘,在github上面就是指仓库的根目录,在网站上就是指服务器的根目录
./
以./开头的路径是相对路径,相对的是自身文件所在的目录,如下两种情况是没有区别的
./image/author.png
image/author.png
…/
…/是相对与自身文件的上级目录,属于相对路径
所以上图中的路径就出在路径前面的/,/表示根目录,我们总不能把static文件移动到根目录,这样就太傻了。
所以我们要找到配置文件更改下路径,找到config/index.js文件,如下图
修改图中assetsPublicPath的参数,每次npm run build后的文件路径将会按照参数生成,两种设置方法:
assetsPublicPath: ‘./’
或
assetsPublicPath: ‘’
这样设置之后,再次npm run build,重新push到github上面,打开.github.io//dist/index.html就能看到预览页了,这还是有问题预览的时候域名特别长,那么如何让.github.io/就可以访问呢,我们下片分解