1. 程式人生 > 程式設計 >vue專案打包後提交到git上為什麼沒有dist這個檔案的解決方法

vue專案打包後提交到git上為什麼沒有dist這個檔案的解決方法

vue專案中使用npm run build打包後會生成一個dist檔案,使用git推送專案後,發現git上少了一個dist檔案,為什麼明明本地專案中有這個檔案而推上去就沒有了呢?

這裡會先介紹.gitignore,不想看的 請直接跳過介紹 看解決辦法

一、.gitignore 介紹

這裡向大家簡述一下.gitignore這個檔案
一、簡紹

我們做的每個Git專案中都需要一個“.gitignore”檔案,這個檔案的作用就是告訴Git哪些檔案不需要新增到版本管理中。比如我們專案中的npm包(node_modules),它在我們專案中是很重要的,但是它佔的記憶體也是很大的,所以一般我們用Git管理的時候是不需要新增npm包的。

二、常用的規則

/mtk/ 過濾整個資料夾
*.zip 過濾所有.zip檔案
/mtk/do.c 過濾某個具體檔案

以上規則意思是:被過濾掉的檔案就不會出現在你的GitHub庫中了,當然本地庫中還有,只是push的時候不會上傳。
除了以上規則,它還可以指定要將哪些檔案新增到版本管理中。

!src/ 不過濾該資料夾
!*.zip 不過濾所有.zip檔案
!/mtk/do.c 不過濾該檔案

1、配置語法:

以斜槓/開頭表示目錄;
以星號*通配多個字元;
以問號?通配單個字元
以方括號[]包含單個字元的匹配列表;
以歎號!表示不忽略(跟蹤)匹配到的檔案或目錄;

此外,git 對於 .ignore 配置檔案是按行從上到下進行規則匹配的,意味著如果前面的規則匹配的範圍更大,則後面的規則將不會生效;

2、示例說明
a、規則:fd1/*
說明:忽略目錄 fd1 下的全部內容;注意,不管是根目錄下的 /fd1/ 目錄,還是某個子目錄 /child/fd1/ 目錄,都會被忽略;
b、規則:/fd1/*
說明:忽略根目錄下的 /fd1/ 目錄的全部內容;
c、規則:
/*
!.gitignore
!/fw/bin/
!/fw/sf/
說明:忽略全部內容,但是不忽略 .gitignore 檔案、根目錄下的 /fw/bin/ 和 /fw/sf/ 目錄;

3、建立.gitignore檔案
(1) 常規的windows操作

  • 根目錄下建立gitignore.txt;
  • 編輯gitignore.txt,寫下你的規則,例如加上node_modules/;
  • 開啟命令列視窗,切換到根目錄(可以直接在資料夾上面的位址列輸入cmd回車);
  • 執行命令ren gitignore.txt .gitignore。

(2) 用Git Bash

  • 根目錄下右鍵選擇“Git Bash Here”進入bash命令視窗;
  • 輸入vim .gitignore或touch .gitignore命令,開啟檔案(沒有檔案會自動建立);
  • 按i鍵切換到編輯狀態,輸入規則,例如node_modules/,然後按Esc鍵退出編輯,輸入:wq儲存退出。

如圖:

# dependencies npm包檔案
/node_modules

# production 打包檔案
/build

# misc 
.DS_Store

npm-debug.log*

**DS_Store:**這個檔案是Mac OS X用來儲存資料夾的一些諸如自定義圖示,ICON位置尺寸,視窗位置,顯示列表種類以及一些像窗體自定義背景樣式,顏色這樣的元資訊。預設情況下,Mac OS X下的每個資料夾下應該都會生成一個,包括網路介質儲存盤和U盤這樣的外部裝置。

在這裡插入圖片描述

**npm-debug.log:**專案主目錄下總是會出現這個檔案,而且不止一個,原因是npm i 的時候,如果報錯,就會增加一個此檔案來顯示報錯資訊,npm install的時候則不會出現。

最後需要強調的一點是,如果你不慎在建立.gitignore檔案之前就push了專案,那麼即使你在.gitignore檔案中寫入新的過濾規則,這些規則也不會起作用,Git仍然會對所有檔案進行版本管理。

簡單來說,出現這種問題的原因就是Git已經開始管理這些檔案了,所以你無法再通過過濾規則過濾它們。因此一定要養成在專案開始就建立.gitignore檔案的習慣,否則一旦push,處理起來會非常麻煩。

二、解決辦法

找到.gitignore這個檔案,把/dist這一項刪掉。在重新提交git就可以了。

在這裡插入圖片描述

總結

到此這篇關於vue專案打包後提交到git上為什麼沒有dist這個檔案的解決方法的文章就介紹到這了,更多相關vue專案打包提交git沒有dist檔案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!