vue项目打包后上传至GitHub并实现github-pages的预览

Vue项目打包上传至GitHub并体验GitHub Pages预览

对于每一个Vue开发者来说，将项目打包并上传至GitHub Pages预览是非常必要的步骤。本文将带你完成这一流程，并在过程中解决可能遇到的问题。从打包vue项目开始，让我们开始吧！

一、Vue项目打包

你需要通过命令行输入打包命令`npm run build`。此命令会在你的项目目录中生成一个名为dist的文件夹，这就是你的项目打包后的产物。一旦完成，你的项目就已经成功打包。

在打包过程中，你可能会遇到一些问题：

问题一：项目资源无法加载。如果你在浏览器中打开生成的index.html文件，可能会发现页面是空的，控制台也没有加载任何css、js文件。这可能是由于你的项目配置问题导致的。解决方法是修改项目根目录config下的index.js文件，将assetsPublicPath: '/'改为assetsPublicPath: './'。然后重新执行打包命令。

问题二：字体图标无法加载。如果字体和图标无法正常显示，你需要打开根目录下build中的utils.js文件，在控制build样式文件代码中添加publicPath: '../../'，然后重新执行打包命令。

二、上传Vue项目并预览

完成项目的打包后，下一步就是将项目上传至GitHub。你需要将项目（包括dist目录）提交至你的仓库。假设你的仓库名称为test。使用命令`git subtree push --prefix dist origin gh-pages`将dist目录提交至gh-pages分支。然后，你就可以通过访问`

还有一些可能遇到的问题和解决方案：

问题：使用mock模拟的数据无法加载。解决方案：创建一个.json文件，将数据写入这个文件，然后在项目中引用这个文件。

问题：对于使用Vue-cli 3.0构建的项目，样式失效。解决方案：在vue.config.js中设置baseUrl: '/staff/'。这样就可以解决样式失效的问题了。

以上就是本文的全部内容，希望这篇文章能帮助到大家的学习和工作。如果你有任何问题或者需要进一步的帮助，请随时联系我们，也请大家多多支持狼蚁SEO。如果你喜欢这篇文章，也请分享给你的朋友们，让更多的人了解和学习到这些知识。