Я обнаружил, что процесс сборки vue-cli (2.9.6, но 3.0.0 beta * имеет ту же проблему) занимает вечность, как только html шаблона становится относительно глубоким.
Например, я простодобавил div s к App.vue, который предварительно включен:
<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>
тогда процесс строительства занимает вечность, и я считаю, что гнездо этой глубины не так уж необычно.
Как мне справиться с этой проблемой?
РЕДАКТИРОВАТЬ (Подробности)
Похоже, что проблема может быть связана со средой, поэтому вот подробности.
Эта проблема может быть воспроизведена, по крайней мере, в следующих средах:
- macOS HighSierra на Mac mini (конец 2014 г.)
- Ubuntu 18.04 на Dell XPS 13
, версия узла и 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 и добавьте много делений:
<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 to 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
БОЛЬШЕ РЕДАКТИРОВАТЬ
Как указывал @ tony19, симпатичнее, скорее всего, подозреваемый.Следуя совету, я попробовал некоторые шаблоны с Ubuntu 18.04 (не Mac, потому что Mac сейчас нет, извините), и мои результаты:
- vue-cli 2.9.6 +
npm run dev - зависание - vue-cli 2.9.6 +
npm run build - 6 секунд (Это так запутанно. Что было за 1 миллион секунд выше!? Может быть, переустановка vue-cli обязана изменением?) - vue-cli 3.0.0-beta16 +
vue serve - зависание (в отличие от отчета @ tony19) - vue-cli 3.0.0-beta16 +
vue build - 5 секунд
ДАЖЕ БОЛЬШЕ РЕДАКТИРОВАТЬ
Итак, кажется, что это определенно вызвано красивее.https://github.com/prettier/prettier/issues/1250 - это исходная проблема, которая решала эту проблему, и команда разработчиков подумала, что https://github.com/prettier/prettier/pull/2259 исправила ее, но реальность такова, что она не могла справиться с моим делом, как @ tony19 показывает это на https://github.com/prettier/prettier/issues/4672.О, хорошо.
"РЕШЕНИЕ"
Я закончил тем, что сделал это - следуя отчету @ tony19, меняя /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 })
// }
Таким образом, проблема решена.Спасибо интерфейс, спасибо.