vue项目打包后提交到git上为什么没有dist这个文件的解决方法


Posted in Javascript onSeptember 16, 2020

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盘这样的外部设备。

vue项目打包后提交到git上为什么没有dist这个文件的解决方法

**npm-debug.log:**项目主目录下总是会出现这个文件,而且不止一个,原因是npm i 的时候,如果报错,就会增加一个此文件来显示报错信息,npm install的时候则不会出现。

最后需要强调的一点是,如果你不慎在创建.gitignore文件之前就push了项目,那么即使你在.gitignore文件中写入新的过滤规则,这些规则也不会起作用,Git仍然会对所有文件进行版本管理。

简单来说,出现这种问题的原因就是Git已经开始管理这些文件了,所以你无法再通过过滤规则过滤它们。因此一定要养成在项目开始就创建.gitignore文件的习惯,否则一旦push,处理起来会非常麻烦。

二、解决办法

找到.gitignore这个文件,把/dist这一项删掉。在重新提交git就可以了。

vue项目打包后提交到git上为什么没有dist这个文件的解决方法

总结

到此这篇关于vue项目打包后提交到git上为什么没有dist这个文件的解决方法的文章就介绍到这了,更多相关vue项目打包提交git没有dist文件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
使用JS读秒使用示例
Sep 21 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 #Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 #Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 #Javascript
Vue项目打包编译优化方案
Sep 16 #Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 #Javascript
如何在JS文件中获取Vue组件
Sep 16 #Javascript
javascript自定义加载loading效果
Sep 15 #Javascript
You might like
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
Ext grid 添加右击菜单
2009/11/26 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
js实现抽奖功能
2020/11/24 Javascript
Python自定义类的数组排序实现代码
2016/08/28 Python
Python交互环境下实现输入代码
2018/06/22 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
Python中url标签使用知识点总结
2020/01/16 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
竞选大队委员演讲稿
2014/04/28 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
项目经理任命书范本
2014/06/05 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
Python 中random 库的详细使用
2021/06/03 Python
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python