当 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-temp…。
Mock 数据无法正常加载 (我的做法是把模拟的 json 数据放到 cdn 上，跳过这一步) 此项目的绝大部分页面内容是通过在跟目录下创建的 data.json 文件渲染到页面上的，是模拟从后端请求数据的，开发调试时用’npm run dev’命令，会借助 node 启动一个本地服务器，可以正常的渲染出相应的数据。而通过打包后的项目时属于静态资源的，点击 index.html 查看项目，是无法加载 mock 的数据的，浏览器也会报跨域的错误。若想正常的加载 mock 数据，最好的方式是讲打包后的资源丢到服务器中，或者使用 jsonp 请求线上真实数据，因为它的原理是利用 script 标签来获得数据，在 github 上是可以预览到的。
如何在 github 上预览网页效果：settings—github pages—选择“master branch”和“save”—刷新—再次找到“github pages”复制底下的链接—返回点击仓库名—点击 edit—粘贴到框框内，一定要记住添加文件名及其后缀比如 index.html—save. 别人就可以通过这个链接访问你的网页
原文：https://blog.csdn.net/x550392…