关于vue-cli项目build后本地和github pages预览问题

前言

最近在初步完成自己的掘金移动端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数据无法正常加载(我的做法是把模拟的json数据放到cdn上，跳过这一步)

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

---

npm run build 后本地和 github pages 都能正常展示 ~

原文