当Vue项目完成后，打开根目录中的命令行并输入命令：

npm运行构建

实际上，这个命令是执行build.js文件并将项目打包到静态资源中。

此命令完成后，项目根目录中将有一个额外的dist文件夹。dist文件包含：

在静态文件下，包含了项目打包后的css、js、img和字体(字体图标)。

无法加载项目资源

单击index.html，浏览器显示页面为空白。打开控制台，看到index.html文件中没有加载css或js文件。

解决方法：

打开项目根目录配置下的index.js文件，并进行以下修改：

更改资产公共路径：’。/“”到assetspublicpath :/',

保存后，重新运行npm构建，并在新生成的dist目录下打开index.html。此时页面结构显示正常，但页面字体图标和模拟数据无法正常加载。

无法加载字体图标

页面中加载了背景的图片可以正常显示，但所有字体图标无法正常显示。解决方案：在根目录下打开build中的utils.js文件，并添加公共路径： '././'在控件的代码构建样式文件中，如下所示：

保存后，“npm运行构建”仍会重复。在dist目录中打开index.js，可以看到字体图标显示正常。

为什么需要在这里修改这个，可以参考https://github.com/vuejs-temp.

模拟数据无法正常加载(我的方法是将模拟的json数据放在cdn上，跳过这一步)

这个项目的大部分页面内容都是通过目录中创建的data.json文件呈现给页面的，该文件模拟了从后端请求数据。开发调试时，使用‘NPM run dev’命令，借助node启动本地服务器，即可正常渲染相应数据。但是，如果打包的项目是静态资源，单击index.html查看项目将不会加载模拟数据，浏览器将报告跨域错误。如果想正常加载mock数据，最好的方法是将打包好的资源扔进服务器，或者使用jsonp请求在线真实数据，因为它的原理是使用脚本标签获取数据，可以在github上预览。

如何在github上预览网页效果：

设置—github pages—-选择“主分支”和“保存”—刷新—再次找到“github pages”副本下的链接—单击仓库名称—单击编辑—-粘贴到框架中，并记住添加文件名及其后缀，如index . html—save。其他人可以通过此链接访问您的网页。

摘要

边肖介绍的上述vue项目打包上传到github，并做了预览链接(页面)，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！