将 Vue.js 应用程序上传到 GitHub 的正确方法是什么？答案

【问题标题】：What is the proper way to upload a Vue.js app to GitHub?将 Vue.js 应用程序上传到 GitHub 的正确方法是什么？
【发布时间】：2021-09-14 04:03:06
【问题描述】：

我试过uploading my files to Github，但 GitHub 说它太大了。

然后我在为生产构建后上传了dist 文件夹的内容。

这很好用，但不是很有用。

将 Vue.js 应用上传到 GitHub 的正确方法是什么？

【问题讨论】：

【解决方案1】：

您生成的内容（可能很大的二进制文件）不应该被版本控制/推送到 GitHub。

最好使用本地插件，该插件将在 GitHub 端构建、标记和发布与您的项目相关联的版本。

您可以将其与 GitHub Action 结合起来，后者可以获取该版本，并将其部署在您选择的远程服务器上（前提是它可以从 GitHub 公开访问）：例如参见 John Kilonzi 中的“How to deploy your VueJS using Github Actions (on Firebase Hosting)” .

对于您现有的 dist，您应该将其删除（仅从 Git，而不是您的磁盘）并将其添加到您的 .gitignore：

cd /path/to/repo
git rm --cached dist
echo dist/>>.gitignore
git add .gitignore
git commit -m "Delete and ignore dist/"
git push

如果我添加一个节点模块会发生什么（比如我决定添加一个图像裁剪器）。其他贡献者如何处理？

您需要在项目中添加该模块的声明，而不是对该模块本身进行版本控制。例如，using Vue.use。

另外：我在 netlify 上托管应用程序。它直接从 github 构建站点。但是如果 gihub 没有 dist 文件夹就无法建站...

参见Jean-Philippe Fong 中的“How to deploy your Vue app with Netlify in less than 2 min!”：Netlify 自己将构建dist（来自您的 GitHub 项目来源）并发布它。

【讨论】：

非常感谢您的回答。恐怕我太懒了，无法理解这一切。如果我理解正确：我忽略了 dist 文件夹，但使用插件构建应用程序以便它可以在我的 netlify 帐户上运行？
@Posoroko 是的，或者 Netlify 可以为您完成（请参阅我编辑的答案）：但无论如何，不应对 dist 进行版本控制/推送。

【解决方案2】：

您应该将 .gitignore 文件添加到您可以忽略文件和目录的目录的根目录。

最典型的忽略如下：

node_modules
/dist
.env
.vscode

【讨论】：

好的，谢谢你的回答！如果我添加一个节点模块会发生什么（比如我决定添加一个图像裁剪器）。其他贡献者如何处理呢？我不得不说我还是个编程新手。
另外：我在 netlify 上托管应用程序。它直接从 github 构建站点。但是如果 gihub 没有 dist 文件夹，它将无法构建站点...我应该添加它吗？
其他贡献者将在他们 fork 你的 repo 后执行npm install。（package.json 文件包含所有需要的 node_modules）你不想将 dist 文件夹添加到 github，在 netlify 中，在基本构建设置下，添加构建命令npm run build 并将 dist 文件夹设置为发布目录。这样 netlify 会自动构建你的项目。
如果我添加一个节点模块会发生什么 - 您将在存储库中有很多根本不需要的文件。您更改的文件将被所有不需要的文件污染。不要误会我的意思，它们是必需的，但仅在客户端。每个想要构建您的项目的人都应该自己做npm install。这可以节省空间并且是常态。