javascript - 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! <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abc6ded8dfced9dd98eb9a859b859b" rel="noreferrer noopener nofollow">[email protected]</a> serve: `webpack --mode development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74190107001106024734455a445a44" rel="noreferrer noopener nofollow">[email protected]</a> 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 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="741a041934425a405a45" rel="noreferrer noopener nofollow">[email protected]</a>
3 info using <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8d6d7dcddf8ce898896898b9688" rel="noreferrer noopener nofollow">[email protected]</a>
4 verbose run-script [ 'preserve', 'serve', 'postserve' ]
5 info lifecycle <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abc6ded8dfced9dd98eb9a859b859b" rel="noreferrer noopener nofollow">[email protected]</a>~preserve: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7dac2c4c3d2c5c184f78699879987" rel="noreferrer noopener nofollow">[email protected]</a>
6 info lifecycle <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cf1e9efe8f9eeeaafdcadb2acb2ac" rel="noreferrer noopener nofollow">[email protected]</a>~serve: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7dac2c4c3d2c5c184f78699879987" rel="noreferrer noopener nofollow">[email protected]</a>
7 verbose lifecycle <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="422f3731362730347102736c726c72" rel="noreferrer noopener nofollow">[email protected]</a>~serve: unsafe-perm in lifecycle true
8 verbose lifecycle <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="610c1412150413175221504f514f51" rel="noreferrer noopener nofollow">[email protected]</a>~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 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2dfc7c1c6d7c0c481f2839c829c82" rel="noreferrer noopener nofollow">[email protected]</a>~serve: CWD: C:\Users\Ugo Okoro\Documents\Visual Studio 2017\Projects\Muster\Muster
10 silly lifecycle <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a776f696e7f686c295a2b342a342a" rel="noreferrer noopener nofollow">[email protected]</a>~serve: Args: [ '/d /s /c', 'webpack --mode development' ]
11 silly lifecycle <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e489919790819692d7a4d5cad4cad4" rel="noreferrer noopener nofollow">[email protected]</a>~serve: Returned: code: 2  signal: null
12 info lifecycle <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f8958d8b8c9d8a8ecbb8c9d6c8d6c8" rel="noreferrer noopener nofollow">[email protected]</a>~serve: Failed to exec serve script
13 verbose stack Error: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1ccd4d2d5c4d3d792e1908f918f91" rel="noreferrer noopener nofollow">[email protected]</a> 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 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="59342c2a2d3c2b2f6a196877697769" rel="noreferrer noopener nofollow">[email protected]</a>
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 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="29445c5a5d4c5b5f1a691807190719" rel="noreferrer noopener nofollow">[email protected]</a> serve: `webpack --mode development`
22 error Exit status 2
23 error Failed at the <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b263e383f2e393d780b7a657b657b" rel="noreferrer noopener nofollow">[email protected]</a> 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) 是导致错误的原因。一个模板只能有一个根元素。