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基础整理1
Dec 06 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
vue中配置mint-ui报css错误问题的解决方法
Oct 11 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 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中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
vue之延时刷新实例
2019/11/14 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
python入门教程 python入门神图一张
2018/03/05 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
python简单贪吃蛇开发
2019/01/28 Python
解决python线程卡死的问题
2019/02/18 Python
pymysql模块使用简介与示例
2020/11/17 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
英文道歉信
2015/01/20 职场文书
董事长年会致辞
2015/07/29 职场文书
2016年中秋祝酒词
2015/11/26 职场文书
导游词之凤凰古城
2019/10/22 职场文书
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL