vue打包发布,vue项目打包发布到网上
本文主要介绍将Vue项目打包部署到GitHubPages的实现步骤。通过示例代码进行了非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。
目录
前言，前期准备的重要说明，步骤1，步骤2，步骤3，步骤4，步骤5，步骤6
前言
什么是github pages？如何创建github仓库并将本地项目上传到远程GitHub仓库？本文之类的基本操作就不赘述了，初学者可以通过搜索找到大量的文章和教程。这篇文章的重点是：
如何将vue项目的源代码(包括dist目录)同步到github仓库，将项目下的dist目录单独同步到gh-pages分支，使用GitHub pages发布和预览静态网页。
针对以上问题，笔者之前的做法是将Vue项目的源代码托管到源代码仓库，然后再创建一个网页仓库来管理dist目录。然后打开网页仓库的GitHub pages功能。实现GitHub页面来访问Vue生成的静态页面。
以上操作适用于不想开放源码库，想免费使用GitHub pages服务的情况。通常一些个人仓库比如演示项目或者开源项目是开放的。使用上述方法需要同时管理两个仓库，操作起来比较麻烦。最近了解到可以使用git subtree Push-prefix dist origin gh-pages指令将项目下的dist目录单独推送到远程仓库的gh-pages分支，然后将GitHub页面的来源切换到gh-pages分支，这样就可以使用GitHub pages服务，管理master分支的源代码GH-pages分支来部署GitHub页面。
前期准备
编译后的Vue项目将本地项目推送到Github远程仓库默认的master分支。步骤1和2没有太多文章和教程，这里就略过了。
重要说明
论Vue项目的公共路径
如果您计划发布到https://.github.io/,可以省略这一步，因为publicPath默认为“/”。如果您计划发布到https://.github.io/REPO/(即您的仓库在https://github.com/USERNAME/REPO中)，请将publicPath设置为“/REPO/”。PERO是你仓库的名字。
步骤1
执行npm run build打包Vue项目，项目目录下会多一个dist目录。
步骤2
将配送推送到远程仓库(默认为主分支)
通常情况下，dist目录会被git忽略，所以需要从忽略的文件中删除dist，然后将dist目录推送到远程仓库。
步骤3
使用git subtree push-prefix dist origin gh-pages将dist目录推送到远程GH-pages分支。如果没有远程gh-pagse分支，将创建一个新的gh-pagse分支，然后进行推送。
注意：这里只能使用gh-pages分支来使用GitHub pages函数。
步骤4
登录远程GitHub库，通过设置-github pages-source将gh-pages设置为source的GitHub页面。
步骤5
访问GitHub页面链接
步骤6
每次npm运行构建后，再次执行步骤2，步骤3。
关于将Vue项目打包部署到GitHub页面的实现步骤，本文到此结束。有关将Vue打包并部署到GitHub页面的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。