本文首发于yoowin.me,欢迎访问!
vue-cli构建的项目,
时看到的页面对应的是
- npm run dev
之后
- npm run build
文件夹中的index.html文件,而不是项目根目录下的index.html文件。
- dist
我第一次使用vue-cli构建的项目,在
之后,在本地打开
- npm run build
文件夹中的index.html文件,页面是空白的。而在本地
- dist
是完全没有问题的。更令我郁闷的是push到github上面时,
- npm run dev
文件都没了。
- dist
一番摸索之后,终于找到了问题原因,我们逐一分析这两个问题。
对比github上和本地文件之后,发现最重要的
文件没有被提交到github上,如下图
- dist
文件是
- dist
执行后被编译打包生成的文件,CSS、JS、图片等文件都在
- npm run build
文件中,所以该文件必须要提交到github上。
- dist
在项目根目录下有一个
文件,文件中设置一些文件名,对应的文件将不会被提交到github上面。
- .gitignore
在
文件中,确实有
- .gitignore
文件名,如下图
- dist
把
文件中的
- .gitignore
文件名删除,然后重新push到github上就有了
- dist
文件
- dist
解决完上面
文件的问题之后,打开该文件路径下的github pages预览地址,还是显示空白页,如下图
- dist
我们查看控制台,可以看到文件的路径都出现了问题,如下图
这里解释一下路径问题中
、
- /
、
- ./
的区别:
- ../
以
- /
开头的路径就是绝对路径,
- /
是指根目录,这里的根目录在本地就是指磁盘,在github上面就是指仓库的根目录,在网站上就是指服务器的根目录
- /
- ./
开头的路径是相对路径,相对的是自身文件所在的目录,如下两种情况是没有区别的
- ./
- ./image/author.png
- image/author.png
- ../
是相对与自身文件的上级目录,属于相对路径
- ../
所以上图中的路径就出在路径前面的
,
- /
表示根目录,我们总不能把static文件移动到根目录,这样就太傻了。
- /
所以我们要找到配置文件更改下路径,找到
文件,如下图
- config/index.js
修改图中assetsPublicPath的参数,每次
后的文件路径将会按照参数生成,两种设置方法:
- npm run build
assetsPublicPath: './'
或
assetsPublicPath: ''
这样设置之后,再次
,重新push到github上面,打开
- npm run build
就能看到预览页了
- <your name>.github.io/<repositories>/dist/index.html
每次的踩坑都是不可预知的,但解决之后是锻炼人的,也是有些许成就感的。这里总结一下这次遇到的问题,希望可以帮到其他人。
来源: https://juejin.im/post/59f058906fb9a045023ad87f