VueJS SFC（单个文件组件）将无法编译

Question

每当我在我的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! [email protected] serve: `webpack --mode development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] 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 [email protected]
3 info using [email protected]
4 verbose run-script [ 'preserve', 'serve', 'postserve' ]
5 info lifecycle [email protected]~preserve: [email protected]
6 info lifecycle [email protected]~serve: [email protected]
7 verbose lifecycle [email protected]~serve: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~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 [email protected]~serve: CWD: C:\Users\Ugo Okoro\Documents\Visual Studio 2017\Projects\Muster\Muster
10 silly lifecycle [email protected]~serve: Args: [ '/d /s /c', 'webpack --mode development' ]
11 silly lifecycle [email protected]~serve: Returned: code: 2  signal: null
12 info lifecycle [email protected]~serve: Failed to exec serve script
13 verbose stack Error: [email protected] 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 [email protected]
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 [email protected] serve: `webpack --mode development`
22 error Exit status 2
23 error Failed at the [email protected] serve script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

Answer 1

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

Answer 2

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

我导致此错误的原因是我在模板中只有一个根元素但没有正确关闭标记（错过了结束标记中的/）。