vue项目发布到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命令：

一、先进入项目文件夹，经过命令 git init 把这个目录变成git能够管理的仓库

git init

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

git add .

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

git commit -m 'message'

四、关联到远程库。

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

五、将项目全部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分支步骤：

一、将远程仓库克隆到本地：

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

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

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

三、将本地克隆文件(文件名为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的数据。