vue项目实现github在线预览功能

2020-06-13 10:39:06易采站长站整理
,再打开
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