前言
最近在使用vue-cli
脚手架工具构建自己的第一个vue
项目,有点小激动,想把它上传到github
并展示一下预览效果,结果踩了好多坑,折腾了大半天才弄好。写下这篇文章(这也是我在掘金写的第一篇文章),如果有同学刚好遇到同样问题,希望对你们有所帮助。
这里假设你也是和我一样使用了
vue-cli
搭建了自己的项目,并且项目也已经上传到了github
问题1
当我们在命令行执行npm run build
后,项目的目录下会生成一个dist
文件夹,它里面又包含一个static
文件夹和一个index.html
文件,这是webpack
最终打包好的文件
index.html
咦,为什么页面显示是空白的?打开控制台,细心的朋友可能会发现,script
标签的引入路径好像不对啊,因为static
文件夹和index.html
是在同一个目录下的,这里却是从根目录引入static
下的文件,正确的路径应该是./
开头的相对路径:
src='./static/...'
或者src='static/...'
是哪里出了问题?其实这跟配置资源的路径有关,打开项目根目录config
文件夹下的index.js
,定位到build
下的assetsPublicPath
(dev下也有一个assetsPublicPath,别搞错了,我就是在这里踩了第一个坑),把
assetsPublicPath: '/'
修改为assetsPublicPath: './'
script
标签的引入路径就找不到static
文件夹下的文件了
重新执行npm run build
,再打开index.html
文件
OK!在浏览器可以看到页面效果了!
也行你会问,为什么assetsPublicPath
的路径要设置为在根目录下,这不是在折腾我们吗?其实这是因为在真正的项目开发中,index.html
和static
文件夹会被放到服务器的根目录下,然后进行线上发布。
问题2
本地预览问题解决了,接着我们把项目push
到github
dist
文件没有被上传到github
,怎么回事?找到项目根目录的.gitignore
文件,这里设置一些文件名,对应的文件将不会被提交到github
上面,而dist
被设置在里面,所以就不能上传到github
上了,我们可以把dist
从文件里移除。
当然还有另一种办法,就是在操作git
命令时,把git add.
改为git add -f dist
意思是强制把dist
文件提交到github
。
好了,现在我们已经可以在github
仓库里看到dist
文件夹。
疑惑,什么
dist
文件夹要设置不被提交? 试想一下,在真正项目开发中,dist
文件夹中的static
和index.html
最终是要被扔到服务器上的,而不是提交到github
上。
现在还是不能实现项目的线上预览效果,点击项目的setting
项,然后找到Github Pages
master branch
,保存,接着你会看到项目在线预览链接,点击链接
此时,你会看到页面一片空白,别急,在地址栏后面添加dist
(因为index.html
是在dist目录
下),回车,好了,线上页面效果出来了
至此,项目的在线预览效果就实现了!!
还没有结束!在项目的master
分支上,混合了源代码和页面预览文件,能不能把两者分开?而且还有一个问题,index.html
总是在dist
路径下的,能不能项目名称直接跟index.html
。这里就引出另外一种办法了。
另外一种办法
采用github
的gh-pages
分支制作GitHub Pages
,只把dist
添加到gh-pages
分支,这样就把源代码和页面预览文件分开了
(先把本地的dist
文件夹删除,再上传到github
,更新master
分支)
git
命令操作
git run build
git branch gh-pages //创建gh-pages分支
git checkout gh-pages //切换到gh-pages分支
git add -f dist //强制把dist文件夹提交到github
$ git subtree push --prefix dist origin gh-pages //把dist文件夹单独部署到gh-pages分支
这里要选择gh-pages branch
,再点击连接,如果此时看到空白页面,别急,稍等一会(内容更新需要时间)
好了,现在看仓库的master
分支,不存在dist
文件夹了,再看线上预览地址,也完美了
扫二维码预览效果
如果是移动端项目,使用手机扫二维码查看预览效果就更佳了,推荐草料二维码
扫一扫,查看我的项目!