最新版 vue 竟然给我硬盘文件都删除了！什么鬼？？

[legendnan]

今天想学习下 vue 。用 vue-cli 创建了一个项目。使用 vue ui 进行项目管理。
当使用 build 的时候 ，将我硬盘文件删除了。卧槽。
我在参数中将输出目录保存在了 H:\。其余没有改变。然后我点击运行，竟然自动将 h 盘下文件都删除了

大佬们，我实在 vue ui 下操作的他是个图形界面。里面没有说会删除 build 下文件俺也不知道，我是个半吊子。。不懂他会删除。文档也没看全。我的理解是他既然是 build 就应该是新建吧，谁知道他还有个删除的前提:(。你们可以在 vue ui 中体验一把。vue 是个很好的工具。没有别的意思。工作中的文件被删除有点坑，发帖来提醒下大家。言辞不当之处多多包涵。

文件已经恢复了。

[legendnan]

这不是坑人吗？我的天，神坑啊。

[lhx2008]

不好评价

[czzhengkw]

建议发到微博上 @尤雨溪

[iConnect]

你是不是用了一个假的 vue ？

[mnssbe]

你说的 bug 能稳定复现么， 固定好证据去怼吧。或者好好学习， 别总想着搞个大新闻

[imzcg2]

我没学过前端，但是我去官网帮你找了找官方的文档

看这个

用法：vue-cli-service build [options] [entry|pattern]

选项：

--mode 指定环境模式 (默认值：production)
--dest 指定输出目录 (默认值：dist)
--modern 面向现代浏览器带自动回退地构建应用
--target app | lib | wc | wc-async (默认值：app)
--name 库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
--no-clean 在构建项目之前不清除目标目录

你大概用了 --dest 但是没看到 --no-clean，cli 的默认不指定就算了，一定不会出问题，但是指定目录就一定要是空目录，不然不会有 --no-clean 这样的参数，不能怪官方啊

[imzcg2]

https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-serve

[legendnan]

@mnssbe 你敢复现吗？ 我 h 盘全给我删了，很多工作文档全在里面。v2 没法传图

[legendnan]

@imzcg2 我用的 vue ui 他页面也没有那些选项啊。 连个提示都没有直接给我干光了

[xiongsa18]

@legendnan 别的不知道，V2 可以发图俺还是知道的。

[doommm]

盲猜是类似 clean-webpack-plugin 的逻辑，build 的时候会清空输出目录

vue-cli 的文档上有写 https://cli.vuejs.org/zh/config/#outputdir

[gabon]

需要 time machine

[ccbikai]

命令贴一下？

[imzcg2]

@legendnan #9 https://www.onlinedown.net/soft/575683.htm
赶紧找回文件呀，晚了就迟了

[msg7086]

@legendnan #9 你是在哪看到这个命令的，可以找写文档的人加一个警告信息。

至于误删除的文件，可以找一些误删除恢复工具尝试恢复。

[noe132]

https://cli.vuejs.org/zh/config/#outputdir
build 前会 清空 输出目录。你指定到磁盘根目录那就是清空磁盘。
通常来说 99.99%的人不会把输出目录指定到一个已经有文件的路径，而且也没有考虑到有人会这样使用。就像没有人会把猫放进微波炉，但是总是会有个例这样做。

[love]

啥意思？输出目录设在根目录？这什么骚操作？

我不用 vue 不知道内情，不过 react-create-app 的输出目录默认是项目目录的 build （能不能改不知道），每次 build 都会自动清空输出目录（毕竟输出目录是要发布到服务器的，过期文件当然不要了）

[loading]

指定了输出目录是根目录？那确实有点可怕！

[xiangyuecn]

输出目录为什么要定义到根目录？为什么不另外建一个 dist 什么的目录？

要是我写的 node 代码也会直接干掉你给的目录里面的全部文件，别问为什么，程序逻辑的常规操作😃

[legendnan]

@doommm
@gabon
@ccbikai
@imzcg2
@msg7086
@noe132
@love
@loading
@xiangyuecn
https://weibo.com/5150413530/JbViACipA
没用过微博，不会发。也不会 @ 可以看下我发的这个微博。没操作什么东西。就这样搞了下，硬盘就被清理了

[legendnan]

@loading 我就没想太多，就想看看生成了个什么东西。

[love]

@legendnan 你不看文档就改设置的吗，上上楼发的官方文档这个输出目录明明说：

outputDir

Type: string

Default: 'dist'

当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。


===
默认的设置在当前目录./dist 下这么合理的设置瞎改，还不看文档地瞎改，这怪谁呢？

[noe132]

我只能说这是因为你没自己看文档就改配置造成的危险后果。
唯一可能的后续改进就是添加一条提示不要选择已有重要文件的目录。
就像 网上一大堆问 linux 解决文件权限问题， 上来就是 chmod 777，看的人也不管会有什么样的后果，复制粘贴就是运行

[legendnan]

@love
@noe132
确实是我个人的原因。

[legendnan]

@imzcg2 谢谢大佬文件已找回

[hallDrawnel]

不了解 vue 构建，但基本上所有编译输出类型的任务，指定的目录都应该是一个专用的目录，里面的内容是不安全的，直接设置成根目录心太大了。
看看能不能用数据恢复的工具尝试恢复一下吧。

[Juszoe]

我觉得吧，build 这个默认删除行为是有点危险，我之前也遇到过，不过没造成什么危害。
但是楼主把输出目录定为 H:\确实有点奇葩。

[lqzhgood]

默认就是在目录下 ./dist
你自己改成 H:

然后 H 被清空~

不明白就用默认设置~ 修改设置前请看文档

[yiyi11]

@Juszoe #27 因为有时候工程遇到一些构建的“疑难杂症”，我们倾向于把构建目录的产出物都删除干净了再重新生成。

[VeryZero]

上面好多人不看原文的吗？输出目录是根目录肯定会清空啊。

难道清空之前还得提示你输出目录里的文件是不是要清空？

这不合理，正常情况下输出目录里的文件当然要清空，都过期了

[madpecker009]

@legendnan sm.ms v2 图床 贴出代码让大家帮你看看

[imzcg2]

@legendnan 已经提交 pr 了。添加了警告 https://github.com/vuejs/vue-cli/pull/5696，希望后来人看文档会注意到 hhh

[gabon]

如果把目录指定到 /，然后以 root 身份执行会发生什么

[EPr2hh6LADQWqRVH]

直接删目录本来就是有问题的，有什么好说的，产生新的文件覆盖就完了。

前端对 build 这个概念根本理解不到位，就跟其他所有概念一样。

你见过 build 其他正经项目对时候，一个 make，特么整个项目目录没了的吗

build 和 clean 本来就是应该分开的两个过程，混为一谈就是混为一谈了，搞错了就是搞错了。

弄清楚之后改正就完了，哪那么多原因 jjyy 的

[OHyn]

这个 build 会清空输出目录的。。。。webpack 的 output.path 会自动删。。

[jarnanchen]

看了下楼主的操作
vue 这个设计肯定是有问题的, 至少对新手极不友好了

[PopRain]

vs 发布也是先删除发布目录，所以，不要发布到根目录，也不要发布到程序的主目录。。。。。

[o0]

看起来似乎也没有毛病，会先清空目录然后写入新文件。

[podel]

@jarnanchen 我也是觉得，这种操作对于新手一不小心就直接全删了。
我觉得至少这种操作必须 强警告 加 手动确认。 嫌烦可以单独加上 --disable-xxx-warning 之类的 参数。

[LifStge]

我感觉吧 确实是需要考虑的问题 输出目录需要时空目录 清除过期 没问题 但是首次设置 不需要判断下么
这么说吧 就是设置错了 然后直接就给清除了 确实不合适
其他很多普遍的做法 不都是 碰到类似情况 直接报错的么 (毕竟改文件夹下的文件 不是工具生成的过期文件) 需要用户手动删除 或者指定强制删除的的参数么

[vinsony]

@avastms 不是做前端的就别瞎指挥，还覆盖，搞笑呢

[codermagefox]

看到这个帖子有点庆幸没有继续写 Vue....各种意义上的...

[ily433664]

build 清空是正常操作吧，真能说设置输出为根目录是真没人想到的

[lloovve]

得了吧，这什么按照你这操作也都会出问题，makefile，等等

[longjiahui]

太惨了

[Kilerd]

是的，还是换 react 吧（

[reus]

传统的编译型语言，是不会清空输出目录的，不知道你们前端界为什么要选择这种设计。
如果让我来设计，就算要清空，也会做一些保险动作。例如输出目录是根目录就报错，或者发现这个输出目录不太像输出目录，例如包含一些不可能是输出文件的文件类型，就报错。又或者只删除特定后缀的文件。
清空输出目录，这个决定可能有合理性和必要性，但细节方面可以做得更好的。可能设计者没有经历过误删文件的痛苦吧。

[runcelim]

前端生成的文件名带有 hash 和时间戳的，每次修改后编译生成的文件不相同，肯定要删除 build 的

[Arrowing]

就算有提供文档，Vue 也推卸不了这个责任，而且还是风险这么巨大的问题。
按国内的这个程序员现状，我敢说，50% 以上的人都不会那么仔细去研究文档的，所以出现楼主这种情况的概率还挺大的。
任何工具的目标都是简单好用，提高效率的，从这点来说，Vue 就没达标。
就像你去玩跳伞，有牌子提醒你要系好降落伞啊，但是肯定还是会有人员帮你检查是否有系好，确保你的人身安全，而不是让你自己去弄，这是责任。

[will0404]

@avastms 和大多数用 make 构建的项目还真不一样，前端资源文件大多会在文件名上加 hash 以便刷新浏览器都能拿到最新文件，如果不清除 output 目录，长期下来会产生巨量的文件，需要手动清除。
你楼下说的对，不是吃这口饭的真别瞎指挥。

[vigossliao]

@Arrowing 说的对 windows 也有推卸不了责任，不过我看 linux 责任更大

[will0404]

当然我也觉得这个工具确实有问题，清除是要的，但应该作为非默认选项。

[SilentDepth]

楼主和下面部分人的评论，让我觉得软件开发的门槛不应该再低下去了

[maichael]

@avastms #33 不懂就不要 jjyy

[podel]

楼主磁盘是不是固态的。不是固态的马上用恢复软件还能恢复文件回来。

[hakono]

虽说 LZ 把输出目录指定到根目录的确挺少见
但是 vue 这种涉及到清空目录的危险操作，没有在文档里做很显眼的警告的确是有问题的

上面很多人都说文档有写、说 LZ 的问题之类的，这就是典型的不提别人着想，觉得某个领域才知道的特定知识是所有人共识了
为什么游戏（尤其主机游戏）在保存存档的时候都会提示“请勿关闭电源”，因为有经验的玩家知道关闭电源可能损坏存档，但是对于这方面不懂的人尤其是轻度游戏玩家来说，根本没人告诉他存档的时候关闭电源会损坏存档这事，这种玩家间的常识超出了他们的知识储备范围

还是那句话不要把特定领域的常识当成全人类共通的认识。这么想的人往往做出的产品，在用户体验方面也是非常糟糕的。

[Biwood]

“我在参数中将输出目录保存在了 H:\”

这可能是过于依赖语法糖的弊端吧。如果你自己配置过 gulp 或者 webpack，就会明白执行打包操作之前清空目标目录是很常见的操作。当然 vue-cli 的这个设计也确实不太好，你可以在 vue 的 github 官方仓库发布一个 issue，要求改进一下。

[creanme]

（这个不是 webpack 弄的吗

[suzic]

正常操作，你这写的有问题

[dswyzx]

谁能试一下如果输出的盘符为系统盘根目录,或者项目所在根目录.会发生什么奇妙旅程
会删除未占用文件然后结束,还是像 rm rf /*那样我干我自己

[chnwillliu]

@reus 传统的编译型语言不存在编译后的目录上 CDN 的问题，前端的编译输出目录一般认为是可以直接拿来替换上一版本放在静态服务器或者 CDN 上的。有空我去试下 visual studio 下手动更改 C#项目 output 然后 build / rebuild 。

[lingo]

react 的官方脚手架难道 build 的时候就不清输出文件夹？

[inwar]

rm 也得加个 y 不是,感觉第一次设置为 build 目录应该得有个确认

[hirasawayui]

你真秀

[Originalee]

clean dist 目录感觉不能让 Vue 背锅吧

[fakeshadow]

防呆设计其实是很有必要的，毕竟大多人自己作出逗操作的时候反应不会是“我真白”，而是“神马垃圾设计”。

[reus]

@chnwillliu 即使有这个需求，也不是一定要清空目标目录。你可以想想，git push 是怎么处理不在版本管理里的文件的？忽略啊。前端同样可以这样处理，只处理自己生成出来的文件，而不是简单粗暴地全部清空。最简单的，加个索引文件，记录下某个版本包含哪些文件，就行了。

[youxiachai]

只能说，现在工程开发。。。有太多约定的东西。。。
往往对于那些，什么都不看，猛干的人来说，的确有点不太友好。。。

[youxiachai]

@reus 问就是没空搞。。。那么多需求要写，搞你这个得花多少时间，等写完，版本都迭代了不知道多少个版本了。。。诸如 npm 的依赖管理就是这样思想下的产物。
大家都会这么想，但是实际，实现，肯定走最省事的路子，比较浪费别人的时间，又不是自己的时间。

[lingo]

react 也是这么做的，然后 vue 就这么被批斗了一番。
懂的在解释原因。从浏览器缓存机制到 cdn 部署到 hash 的出现，这有一整条因果线。
不懂还在想当然地章口就莱。

[love]

@lingo react 虽然也清空但似乎不允许让你改默认输出目录，所以这是 Vue 功能做得太灵活背锅了哈哈，建议去掉这个选项写死目录

[EPr2hh6LADQWqRVH]

@vinsony
@will0404
@maichael

逗死我了真是夏虫不与语冰。
解决 CDN 缓存问题的方案又不只加后缀这一种，html 里加参数是不是也行啊？

加后缀的好处不就是不影响旧版本的使用，可以并存吗，
但问题来了，你 build 目录随时删，能测出多版本并存的实际行为吗？

每次删目录 => 因为每次产生的文件名不一样 => 因为需要不同版本文件共存 => 每次删除目录不保留之前版本？

前端肤浅浮躁成这样还说不得了？ 起码自己好好梳理一下吧

[hyyy]

只能说，国内对 vue 鄙视的群体还真不是少数，这种问题 Vue 都能被骂，并且还是些非前端职业的人，真替 Vue 不值。

[hyyy]

这标题取的，LZ 可以去 UC 新闻部报道去了。

[byzf]

em..

不怪 vue 吧，vue 毕竟是库，面向的是开发，不是面向小白的软件，本质上你自己要对自己敲下的每一个命令会发生什么有一定概念，并承担相应的责任。

你的期冀可能是 vue-cli 在即将清空目录时给一个提示， 并要求输入 yes，除非带上 -force 之类的参数。我个人认为有点强人所难。

[jichangee]

@avastms 加参数当然能清除缓存，但是会影响到正在使用旧版本的用户，因为文件被覆盖了，如果是 hash 方式就可以将影响降到最低

[EPr2hh6LADQWqRVH]

build 和 clean 没分开，做得不够到位，承认起来就这么难么，又不是你写的代码。

直接删目录不就是一个鲁莽懒散么，简单处理能用就行了。

这还没遇到把输出目录指到父级的，我删我自己？

上面也有其他人科普了，就是真正需要 build 的那种 c 系项目，很多是没有专门输出目录的，输出的东西就和源码放一起，从来见不到删目录这种行径，想要清理专门有一个 clean 过程，正好就是 build 的逆过程。正经 build 正经 clean 。

生成文件名带哈希后缀咋了，妨碍 clean 过程吗妨碍覆盖吗只能删目录吗？
一个正则匹配不就都解决了吗？

[iamverylovely]

@avastms 删目录确实不是个好选择，但如果只是单纯覆盖，那么你会发现会出现一大堆垃圾文件（当然通过编程能解决，只是很麻烦，Vue 用的是一种相对简单的方式吧），我通常的解决办法是，用一个名叫"filemanager-webpack-plugin"的插件，每次 build 后压缩为 zip，命名是时间戳+zip，这样就不会被删除东西了，这个东西吧，本身扩展很强，不一定什么都要他们去设计，自己也可以学着完善某些功能。

[iamverylovely]

@iamverylovely 回复自己算了~~最后说一句，我爱开源、支持开源，lz 哪天看不惯 vue 了，lz 自己去提交代码、lz 自己去完善这个开源项目。

[will0404]

@avastms 。。。。。。你真别回了，还“夏虫不可语冰”，我看的尴尬死了。

CDN 问题可以有一百种方式解决，可是当你专注于前端时你能做的就不多，拿你的例子来说，http 里可以加参数，可是你 build 出来的东西不一定由你来 host，懂？简单点，也别讨论哪种方法最好了，你给我找几个 js 文件名不含 hash 或者版本号的站点看看吧？

正确的 flow 是：每次产生新的文件=>本地开发时避免磁盘冗余每次删旧文件=>部署到生产时可以保留新版和旧版以便回归。

>> 你 build 目录随时删，能测出多版本并存的实际行为吗？
你这句话也是蛮无知和搞笑的，版本实际上应该由 git tag 管理，我切个 tag 再 build 可不就能测对应的版本了吗？为啥我需要把所有版本和中间修改生成的文件保存在我本地的 build 目录呢？

我也完全同意直接删目录不可取，更好的做法是删除前提示，或者缓存前几次的文件。

嘴洗干净再学人回帖好吗？

[EPr2hh6LADQWqRVH]

@will0404 你这根本没搞明白我说的啊，不在一个频道上啊。

要不你自己打开几大站看一下 html? 引用的 js 都带着哈希呢？ google 的 html 能不能堵上你的嘴？

还有小伙子，你瞅啥不一定非得回答瞅你咋地啊。

[will0404]

@avastms 用你的话回你吧，夏虫不可语冰。我不屑于你的无知浪费时间，到此为止。

[EPr2hh6LADQWqRVH]

@will0404 Blocked. 爽不爽

[zhw2590582]

creat-react-app 会不会也有这个问题，那样的话就不应该 vue 背这个锅，是 webpack 没考虑到居然有人这样做

[lerry]

记得多年前 windows 上一个软件，不记得是迅雷还是啥，我装在了一个有很多文件的目录，卸载时，目录文件给我删完了

[chengxy]

@lerry #85 能自己清空目录的说明是好软件，不像有些垃圾软件明明卸载了还留一堆垃圾文件。

[baobao1270]

看了这个问题想到了两个事情

一是某个英伟达驱动官方安装脚本中，把 rm -rf /usr/bin/nvida/... 写成了 rm -rf /usr /bin/nvida/...
也就是多了一个空格，导致了很多人数据丢失

二是在很多 Linux 发行版，当你执行 rm -rf / 命令时，会提示你使用 --no-preserve-root 参数进行确认，但部分发行版不会检查。

我觉得楼主犯的错误与一类似，这是一个又蠢又可怜的错误。我们希望软件的开发者可以像二一样多一个检查，但是也不能苛责他们将其视为义务，因为开源许可证已经明确了免责条款。

[chnwillliu]

@avastms 确实是没有根据 build 生成的文件跟踪来做删除，而用了最简单的清空 output 目录的方法，但我觉得这个操作可以理解，并非前端浮躁肤浅。

加后缀不是为了多版本共存，是因为把指纹或者说版本号放在 url 的 querystring 里其实不是最完美的方案，存在一定风险（有些浏览器认为 querystring 变化后资源可以复用；持续集成发布中遇到资源引用更新但实际内容没来得及更新时 CDN 会用新 URL 缓存旧资源，而你不可能每次发布都刷一遍 CDN 缓存； 。。。），而目前公认的方案是放在 filename 里。所以 rebuild 需要清空上次内容，而最简单的 clean 就是清空整个目录。

@avastms 总喜欢和其他 C 系的项目比，但是这里的比较是不对等的。前端的这些 CLI build 产生的 output 目录是 release-ready 的，你 copy 这个目录然后拿个 nginx 托管一下就能跑的，这是这些工具的意义。make 一下直接就地生成二进制能直接目录打包分发给客户么？你要做 installer 或者 zip 打包你的软件，是不是提前要保证目标目录是干净的？你不希望你的 installer.exe 一释放你的学习资料跑出来了吧，你的 Assembly 过程不希望最终的 package 混进奇怪的东西吧。 所以说这个和传统的 clean 是有差别的。

[xuewuchen]

我一般做测试或者试验性的东西习惯性先在虚拟机里玩一下。。现在的电脑配置上去了，虚拟机功能也巨全，我现在非常喜欢虚拟机，打算再换电脑的时候，所有的环境安装到虚拟机里面，在虚拟机里工作。换电脑直接拷贝虚拟机就行。so easy

[ji39]

你怎么不挂到 c:\inetpub\wwwroot\ 去

[xiaoming1992]

这就是不熟悉 webpack 直接上脚手架的后果

[free9fw]

楼主估计是不知道 '/'和'./'的区别

[march1993]

这问题就像 rm * 怎么不提醒我一下似的

[sarices]

运行用户权限太高了吧，用低一点的权限就算选错目录了也不至于文件全部删除

[lianxiben]

总想搞个大新闻。。

[zxcslove]

很多二十年前的老程序，安装时如果指定的目录有文件，会提示一下。
能力越大责任越大，现在新手那么多，可以考虑设置一个一次性的提醒的。

[doudouwu]

真有人把猫放微波炉里哎

[shunia]

#80 说前端开发的流程就是应该要删除生成目录的，我都看蒙了，而且理由居然是会占用硬盘需要手动删除。
所以是不是还不能用 node_modules，只能在 html 里远程引用 umd 的库？毕竟 node_modules 占用硬盘太多，而且居然还不能删除！

[UIXX]

这种设计理念与用户体验的冲突只能由尤雨溪去平衡，下面的吃瓜群众只能是公婆各有理。

[jon]

弄了个大新闻