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 相关文章推荐
javascript动态加载二
Aug 22 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
Vue通过input筛选数据
Oct 26 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 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
PHP 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
Python 正则表达式操作指南
2009/05/04 Python
python判断windows隐藏文件的方法
2014/03/21 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
Django实现celery定时任务过程解析
2020/04/21 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
2015年乡镇发展党员工作总结
2015/03/31 职场文书
开除通知书范本
2015/04/25 职场文书
检讨书格式
2015/05/07 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
django上传文件的三种方式
2021/04/29 Python
java项目构建Gradle的使用教程
2022/03/24 Java/Android
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python