我发现vue-cli（2.9.6，但3.0.0 beta *有相同的问题）的构建过程需要一旦模板的html相对深入。
例如，我刚刚添加了一些div到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>
然后建筑过程需要永远，我相信这个深度的巢并不是那么罕见。
我该如何处理这个问题？
似乎问题可能是特定于环境的，所以这里有详细信息。
至少可以使用这些环境重现此问题：
和节点和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
，此过程在此时停止：
> [email protected] 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
如果我放手，它需要...... 1155409ms !!!!
DONE Compiled successfully in 1155409ms 13:35:34
I Your application is running here: http://localhost:8080
正如@ tony19所指出的那样，可能是嫌疑人更漂亮。按照建议，我尝试了一些Ubuntu 18.04的模式（不是Mac，因为Mac现在不在这里，对不起）我的结果是：
npm run dev - 挂npm run build - 6秒（这太令人困惑了。上面的100万秒是什么时候！？也许重新安装vue-cli欠这个变化？）vue serve - 挂起（与@ tony19的报告相反）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 })
// }
因此问题得以解决。谢谢前端，谢谢。
我可以像你描述的那样重现性能问题（macOS High Sierra 10.13.4，Node 8.9.4和9.11.1）。新创建的vue-cli 3.x项目也会出现此问题。
悬挂实际上发生在prettier，来自vue-loader's template compiler。嵌套的<div>s由vue-loader转换为JavaScript，并成为以下代码段：
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"app"}},[_c('img',{attrs:{"src":require("./assets/logo.png")}}),_vm._v(" "),_c('router-view'),_vm._v(" "),_vm._m(0)],1)}
var staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div')])])])])])])])])])])])])])])])])])])])])])])])])}]
vue-loader将这根长串传递给prettier，这需要大约159秒的时间来处理。错误的原因是深层嵌套的函数调用创建了divs。我在prettier（Issue 4672）报道了这个错误。
在此期间，我建议您重构HTML以避免深度嵌套。如果你需要坚持使用旧模板，你可以通过在生产模式下构建来解决问题，因为vue-loader跳过prettier进行生产构建：
NODE_ENV=production npm run dev
更新vue-loader v15.5.0添加了prettify选项以允许禁用prettier（更新到@vue/cli的最新版本以确保您的vue-loader是新选项的最新版本）。您可以按如下方式使用此选项：
vue.config.js（如果它已经不存在）添加到项目的根目录中。module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.prettify = false
return options
})
}
}
最近vue-loader在他们的选项中添加了一个标志，以便在开发期间禁用prettier。
只需将prettify: false添加到您的vue-loader选项中。
https://vue-loader.vuejs.org/options.html#prettify
注意：请确保您拥有最新的vue-loader版本
我有类似的问题与vue-cli 3.1.1（TypeScript + SCSS）和Bootstrap（默认情况下需要一些嵌套）。结构示例：
<template>
<div class="container">
<div class="row">
<div class="col-12">
<div class="card-deck">
<div class="card">
<div class="card-body">
<div class="accordion">
<div class="card">
<div class="card-header">
...
</div>
<div class="collapse">
<div class="card-body">
<div class="row">
<div class="col-12 form-group">
<label>...</label>
<div class="dropdown">
<button class="custom-select" type="button" data-toggle="dropdown">{{someValue}}</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" :data-key="somekey1" @click="onClickMethod">value1</a>
<a class="dropdown-item" href="#" :data-key="somekey2" @click="onClickMethod">value2</a>
...
需要~12秒才能编译400多行代码（模板+ TypeScript + SCSS）。删除后：
:data-key="somekey1" @click="onClickMethod"
:data-key="somekey2" @click="onClickMethod"
代码需要〜5-6秒才能编译。将代码移动到自定义组件（以及从Vue组件到Helper.ts文件的一些TypeScript代码）之后：
<template>
<div class="container">
<div class="row">
<div class="col-12">
<div class="card-deck">
<div class="card">
<div class="card-body">
<div class="accordion">
<div class="card">
<div class="card-header">
...
</div>
<div class="collapse">
<div class="card-body">
<SubComponent/>
它需要大约700毫秒来编译（一个主要组件和两个额外的子组件，每个文件少于100行代码+ Helper.ts只有97行代码）。
因此，如果您遭受npm run serve性能不佳，首先尝试子组件，我在调用npm run build时没有注意到编译时间的差异，所以我假设（可能不正确）这个问题也是由serve启用的代码修饰符引起的禁用build（在保存操作时不调用TSLint，因此在我的情况下它不会影响npm run serve）。
我的25个嵌套<div>没有任何特殊问题:(以下使用Vue运行时编译器的示例，以便您可以直接在浏览器中轻松测试它）
new Vue({
el: '#app',
template: '#app-template',
});#app div {
border: 1px solid grey;
padding: 1px;
}<script src="https://unpkg.com/vue@2"></script>
<div id="app">
</div>
<template id="app-template">
<div id="app">
<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>25 nested <code><div></code>'s</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>
</template>这是一个在CodeSandbox上有一个Vue CLI项目的演示，可能更接近你的例子：https://codesandbox.io/s/v3knpl447l
（i.s.它预先编译了模板，因此构建过程实际上发生在CodeSandbox服务器上）