VueJS SFC（单文件组件）不会编译答案

【问题标题】：VueJS SFC(Single File Component) won't compileVueJS SFC（单文件组件）不会编译
【发布时间】：2019-02-11 22:19:53
【问题描述】：

每当我在我的 SFC ~home.vue 中的 html 中添加额外的 html 行时，我都会收到此错误。请参阅下面的错误：

> webpack --mode development

Hash: 1e4bd20702518101b259
Version: webpack 4.29.3
Time: 2565ms
Built at: 02/11/2019 10:53:45 PM
    Asset     Size  Chunks             Chunk Names
bundle.js  433 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 475 bytes {main} [built]
[./wwwroot/app.js] 211 bytes {main} [built]
[./wwwroot/routes.js] 194 bytes {main} [built]
    + 11 hidden modules

ERROR in ./wwwroot/components/home.vue?vue&type=template&id=f890ddf8& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./wwwroot/components/home.vue?vue&type=template&id=f890ddf8&)
Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
RangeError: Invalid string length
    at repeat$1 (C:~Documents\Visual Studio 2017\Projects\xyz\node_modules\vue-template-compiler\build.js:4558:28)
    at Object.generateCodeFrame (C:\~\Documents\Visual Studio 2017\Projects\xyz\node_modules\vue-template-compiler\build.js:4540:52)
    at loaderContext.emitError.compiled.errors.map (C:\~\Documents\Visual Studio 2017\Projects\xyz\node_modules\vue-loader\lib\loaders\templateLoader.js:64:34)
    at Array.map (<anonymous>)
    at Object.module.exports (C:\~\Documents\Visual Studio 2017\Projects\xyz\node_modules\vue-loader\lib\loaders\templateLoader.js:63:25)
 @ ./wwwroot/components/home.vue?vue&type=template&id=f890ddf8& 1:0-202 1:0-202
 @ ./wwwroot/components/home.vue
 @ ./wwwroot/app.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! musterv3@1.0.0 serve: `webpack --mode development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the musterv3@1.0.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\~\AppData\Roaming\npm-cache\_logs\2019-02-11T21_53_45_974Z-debug.log

仅当我在组件的模板标记中的 html 中添加额外的 html 行时才会发生这种情况。这是组件代码home.vue

<template>
    <div class="container">
        <div class="banner row align-items-center">
            <div class="col-md-4 col-12">
                <h1 class="banner__header">Earn money on your spare rooms</h1>
                <p class="">Find out how much you could earn.</p>

                <div class="input-group mb-3 banner__calculator">
                    <input type="text" class="form-control" placeholder="Location" list="locations" aria-label="Location">

                    <button type="button" class="btn">GO</button>
                </div>
            </div>
            <div class="col-md-8 col-12 d-none d-sm-block text-center">
                <div class="banner__property">
                    <div class="banner__property__info">
                        <p>NGN 250,000/Year</p>
                        <p>Tayo's Apartment, Yaba, Lagos</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data : function() {
            return { message: 'Hello World' };
        }
    }
</script>

如果我在模板代码中添加额外的行，我会收到错误消息。

谁能解释一下？请记住，我正在使用 webpack 和 vue-loader。

完整日志

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'serve' ]
2 info using npm@6.4.1
3 info using node@v10.13.0
4 verbose run-script [ 'preserve', 'serve', 'postserve' ]
5 info lifecycle musterv3@1.0.0~preserve: musterv3@1.0.0
6 info lifecycle musterv3@1.0.0~serve: musterv3@1.0.0
7 verbose lifecycle musterv3@1.0.0~serve: unsafe-perm in lifecycle true
8 verbose lifecycle musterv3@1.0.0~serve: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\Ugo Okoro\Documents\Visual Studio 2017\Projects\Muster\Muster\node_modules\.bin;.\node_modules\.bin;C:\PROGRAM FILES (X86)\MICROSOFT VISUAL STUDIO\2017\COMMUNITY\COMMON7\IDE\EXTENSIONS\GITHUB\GITHUB\lib\win32\x86;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\dotnet\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\nodejs\;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\110\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files\Microsoft SQL Server\120\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\140\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn\ManagementStudio\;C:\Program Files\Git\cmd;C:\Program Files (x86)\Yarn\bin\;C:\WINDOWS\System32\OpenSSH\;C:\Users\Ugo Okoro\AppData\Local\Microsoft\WindowsApps;C:\Users\Ugo Okoro\AppData\Roaming\npm;C:\Users\Ugo Okoro\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\Ugo Okoro\AppData\Local\Yarn\bin;C:\Users\Ugo Okoro\.dotnet\tools;C:\Users\Ugo Okoro\AppData\Local\Microsoft\WindowsApps;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Web\External;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Web\External\git
9 verbose lifecycle musterv3@1.0.0~serve: CWD: C:\Users\Ugo Okoro\Documents\Visual Studio 2017\Projects\Muster\Muster
10 silly lifecycle musterv3@1.0.0~serve: Args: [ '/d /s /c', 'webpack --mode development' ]
11 silly lifecycle musterv3@1.0.0~serve: Returned: code: 2  signal: null
12 info lifecycle musterv3@1.0.0~serve: Failed to exec serve script
13 verbose stack Error: musterv3@1.0.0 serve: `webpack --mode development`
13 verbose stack Exit status 2
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:182:13)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:182:13)
13 verbose stack     at maybeClose (internal/child_process.js:962:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
14 verbose pkgid musterv3@1.0.0
15 verbose cwd C:\Users\Ugo Okoro\Documents\Visual Studio 2017\Projects\Muster\Muster
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "serve"
18 verbose node v10.13.0
19 verbose npm  v6.4.1
20 error code ELIFECYCLE
21 error errno 2
22 error musterv3@1.0.0 serve: `webpack --mode development`
22 error Exit status 2
23 error Failed at the musterv3@1.0.0 serve script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

【问题讨论】：

额外的行是什么，你在哪里添加它？
上传完整的日志和额外的行
@DarraghEnright 任何一行。我添加了一个<p> </p>，它坏了。
知道您在哪里添加它对我们来说很重要。您是在<div class="container"> 内部还是外部添加它？
报告的错误是RangeError: Invalid string length。在这种情况下，这是相当模糊的。

标签： javascript templates vue.js vue-loader

【解决方案1】：

在模板中的根 div 之外添加任何其他代码行 (html) 是导致错误的原因。一个模板只能有一个根元素。

【讨论】：

他有一个带有类容器的根 div。这不是这个问题的原因。
我遇到了同样的问题，只需检查所有组件（与此组件、子组件或父组件相关）是否存在此问题。
确实如此...您可以检查根是一个组件，它接受插槽并且组件本身具有多个根的情况。一种解决方法是将组件的内容包装在另一个 div

【解决方案2】：

为来自谷歌的人回答（这个回答是这个错误的最高结果）。

我造成这个错误的原因是我在模板中只有一个根元素，但没有正确关闭标签（错过了结束标签中的 /）。

【讨论】：