手记

Vue项目上传github并预览

前言

最近在初步完成自己的掘金移动端App后,想要上传到github,并且制作一个简单的预览功能,期间遇到了一些问题,分享在此,以便查阅。

打包Vue项目

当Vue项目完成后,在根目录下打开命令行,输入命令:

npm run build

实际上此命令就是执行build.js文件,将项目打包成静态资源。
此命令完成后,项目根目录下会多出一个dist文件夹,dist文件里面有:

static文件下包括项目打包后的css、js、img、fonts(字体图标)。

项目资源无法加载

点击index.html,浏览器显示该页面是空白的,打开控制台看到:

这里看到index.html文件中没有加载任何css、js文件,解决方法:

  • 打开项目根目录 config 下的 index.js 文件,进行如下修改:
  • 将 assetsPublicPath: '/', 改为 assetsPublicPath: './',

保存后重新'npm run build',在新生成的dist目录下点开index.html,这时页面结构正常显示出来了,但是页面字体图标和mock的数据无法正常加载。

字体图标无法加载

页面中用background加载的图片可以正常显示,但是所有的字体图标都不能正常显示,解决方法:打开根目录下 build 中的 utils.js 文件,在控制build样式文件代码中添加 publicPath: '../../', 如下:

保存后,依旧重新'npm run build',打开dist目录下的index.js可以看到字体图标正常显示了。
这里为什么需要这样修改,可以参考https://github.com/vuejs-templates/webpack/issues/166。

Mock数据无法正常加载

此项目的绝大部分页面内容是通过在跟目录下创建的data.json文件渲染到页面上的,是模拟从后端请求数据的,开发调试时用'npm run dev'命令,会借助node启动一个本地服务器,可以正常的渲染出相应的数据。而通过打包后的项目时属于静态资源的,点击index.html查看项目,是无法加载mock的数据的,浏览器也会报跨域的错误。若想正常的加载mock数据,最好的方式是讲打包后的资源丢到服务器中。

利用git命令将项目上传到github

首先设置SSH key,网上的教程很多,推荐一个简书里面的两种方法上传本地文件到github,完成后在github里面新建一个一个存放项目的仓库(建议勾选上初始化),git命令:

1、先进入项目文件夹,通过命令 git init 把这个目录变成git可以管理的仓库

git init

2、把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数点“.”,意思为添加文件夹下的所有文件。

git add .

3、用命令 git commit告诉Git,把文件提交到仓库。引号内为提交说明。

git commit -m 'message'

4、关联到远程库。

git remote add origin 你的远程库地(如:https://github.com/Aaron0525/Vue-juejin-App.git)

5、将项目所有push文件到仓库中。

git push -u origin master

  • 第五步操作时,有时会失败,我的方法是将 u 改为 f 来提交,即输入命令git push -f origin master
    回到github中该项目的仓库,项目文件就提交上去了,若失败,请仔细核对步骤。
制作github在线预览效果

github制作预览是需要利用GitHub Pages的,点击项目仓库的setting,找到source,切换到master branch,点击保存。

点击GitHub Pages下面出现的网址即为预览地址,但是此时点击进去会发现没有页面效果,没关系,下面继续:

我们生成githubPages的目的就是需要生成一个gh-pages分支(正常情况下只有一个master分支)。

生成gh-pages分支步骤:

1、将远程仓库克隆到本地:

git clone https://github.com/Aaron0525/Vue-juejin-App.git(项目克隆地址)

2、生成分支gh-pages并切换到此分支

cd flexSupplement (进入到你克隆仓库的本地文件夹)
git checkout --orphan gh-pages (创建分支并切换)

3、将本地克隆文件(文件名为github仓库名)里面除.git文件以外的其他文件全部删除,再将根目录下dist文件夹里面的内容复制到克隆文件中。

依次执行以下命令:
git add . (将本地所有文件加到仓库里)
git commit -m "message" (设置提交信息)
git remote add origin https://github.com/Aaron0525/ Vue-juejin-App.git(本地仓库链接远程仓库)
git push -u origin gh-pages (push文件到仓库中)

完成以上步骤后,回到github里面,点击上面说到的GitHub Pages下面的地址,既能预览效果,同样这里面还是无法显示mock的数据。

总结

github,这个星球上最流行的开源托管服务的分布式网站,作为程序员,掌握基本的github使用方法,无论是对于分享、托管自己的项目,还是查阅其他优秀的开源项目,都是十分有帮助的。
以下是我的一些项目演示:

Vue2.0移动端以音乐播放器
Vue2.0模仿掘金App
响应式网站

觉得有用的,可以给个start哦! 感谢!!!

原文:http://www.upyang.com/2017/07/25/Vue%E9%A1%B9%E7%9B%AE%E4%B8%8A%E4%BC%A0github%E5%B9%B6%E9%A2%84%E8%A7%88/

18人推荐
随时随地看视频
慕课网APP

热门评论

666666666666666666666666666666666666666

别人黄老师叫尽量不要开源,你还拿着别人的代码在这装大神,也太恶心了吧。

最后怎么才能显示效果呢?


查看全部评论