我发现vue cli(2.9.6,但3.0.0 beta*也有同样的问题)的构建过程会在模板的html变得相对深入后永远持续下go .
例如,我刚刚在App.vue
中添加了一些div
,这是预先包含的:
<template>
<div id="app">
<img src="./assets/logo.png">
<div><div><div><div></div></div></div></div>
<HelloWorld/>
</div>
</template>
这不需要太长时间.
但一旦它得到这个:
<template>
<div id="app">
<img src="./assets/logo.png">
<div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
<HelloWorld/>
</div>
</template>
然后建造过程会持续很长时间,我相信这种深度的巢穴并不罕见.
我该如何处理这个问题?
EDIT(Details)
似乎问题可能与环境有关,下面是详细信息.
这个问题至少可以在以下环境中重现:
- macOS High Sierra on Mac mini(2014年底)
- 戴尔XPS13上的Ubuntu 18.04
node 和npm版本为:
node --version
# prints
v8.9.4
# and
npm version
# prints
{ npm: '6.1.0',
ares: '1.10.1-DEV',
cldr: '31.0.1',
http_parser: '2.7.0',
icu: '59.1',
modules: '57',
nghttp2: '1.25.0',
node: '8.9.4',
openssl: '1.0.2n',
tz: '2017b',
unicode: '9.0',
uv: '1.15.0',
v8: '6.1.534.50',
zlib: '1.2.11' }
有了这些,我在Mac上重试了以下内容:
npm uninstall -g vue-cli
npm install -g vue-cli
vue init webpack divnest
# then some Enter keys - everything is default
cd divnest
然后,打开App.vue
并放置许多div:
<template>
<div id="app">
<img src="./assets/logo.png">
<div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
<router-view/>
</div>
</template>
(因为我在这里使用了默认设置,所以与最初的帖子不同,这里包含了<router-view/>
,但这应该不是问题.)
最后,
npm run dev
这需要很长时间——具体来说,这个过程在这一点上停止:
13% building modules 28/31 modules 3 active ...myname/Documents/divnest/src/App.vue
就
npm run build
,该过程在此点停止:
> divnest@1.0.0 build /Users/myname/Documents/divnest
> node build/build.js
Hash: 483ebabc54d5aed79fd7
Version: webpack 3.12.0
Time: 13742ms
Asset Size Chunks Chunk Names
static/js/vendor.7fed9fa7b7ba482410b7.js 112 kB 0 [emitted] vendor
static/js/app.f1ebca7a6e0ec0b7ebdf.js 12 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js 857 bytes 2 [emitted] manifest
static/css/app.30790115300ab27614ce176899523b62.css 432 bytes 1 [emitted] app
static/css/app.30790115300ab27614ce176899523b62.css.map 828 bytes [emitted]
static/js/vendor.7fed9fa7b7ba482410b7.js.map 553 kB 0 [emitted] vendor
static/js/app.f1ebca7a6e0ec0b7ebdf.js.map 23.3 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js.map 4.97 kB 2 [emitted] manifest
index.html 509 bytes [emitted]
Build complete.
Tip: built files are meant 到 be served over an HTTP server.
Opening index.html over file:// won't work.
94% asset optimization
如果我放手,它需要...1155409毫秒!!!!
DONE Compiled successfully in 1155409ms 13:35:34
I Your application is running here: http://localhost:8080
MORE EDIT
正如@到ny19所指出的,更漂亮的可能是嫌疑犯.按照建议,我在Ubuntu 18.04上try 了一些模式(不是Mac,因为Mac现在不在,抱歉),结果如下:
- vue cli 2.9.6+
npm run dev
-挂起 - vue cli 2.9.6+
npm run build
-6秒(这太令人困惑了.上面的npm run build
万秒是多少?可能是重新安装vue cli导致了更改?) - vue-cli 3.0.0-beta16 +
vue serve
- hang (as opposed 到 @到ny19's report) - vue cli 3.0.0-beta16+
vue build
-5秒
EVEN MORE EDIT
所以,这似乎肯定是由漂亮引起的.
"SOLUTION"
最后我做了这件事——跟随@到ny19的报告,将/node_modules/vue-loader/lib/template-compiler/index.js
行78:81进行了更改
if (!isProduction) {
code = prettier.format(code, { semi: false })
}
到
// if (!isProduction) {
// code = prettier.format(code, { semi: false })
// }
这样问题就解决了.谢谢前端,谢谢.