vue-cli 加载器不适用于 webpack-simple 的默认初始化

Posted 2023-02-22

【中文标题】vue-cli 加载器不适用于 webpack-simple 的默认初始化

【英文标题】：vue-cli loader not working with default init for webpack-simple

【发布时间】：2017-08-15 10:00:27

【问题描述】：

我正在学习 Vue.JS。我安装了 cli 并创建了一个项目：

$ npm install -g vue-cli
$ vue init webpack-simple vue-example
$ cd vue-example
$ npm install
$ npm run dev  # this is where problem starts!

我收到此错误消息：

> vue-example@1.0.0 dev /Users/me/Code/vue/vue-example
> cross-env NODE_ENV=development webpack-dev-server --open --hot

Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Hash: adf2dedbe76c7658d182
Version: webpack 2.3.1
Time: 7592ms
                                    Asset     Size  Chunks                    Chunk Names
logo.png?82b9c7a5a3f405032b1db71a25f67021  6.85 kB          [emitted]
                                 build.js  1.59 MB       0  [emitted]  [big]  main
chunk    0 build.js (main) 565 kB [entry] [rendered]
   [22] ./~/vue/dist/vue.esm.js 244 kB 0 [built]
   [38] (webpack)/hot/emitter.js 77 bytes 0 [built]
   [39] ./src/main.js 134 bytes 0 [built]
   [40] (webpack)-dev-server/client?http://localhost:8080 5.44 kB 0 [built]
   [41] (webpack)/hot/dev-server.js 1.57 kB 0 [built]
   [42] ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 188 bytes 0 [built]
   [44] ./src/App.vue 1.59 kB 0 [built]
   [50] (webpack)-dev-server/client/overlay.js 3.6 kB 0 [built]
   [51] (webpack)-dev-server/client/socket.js 856 bytes 0 [built]
   [56] (webpack)-dev-server/~/sockjs-client/lib/entry.js 244 bytes 0 [built]
   [87] (webpack)-dev-server/~/strip-ansi/index.js 161 bytes 0 [built]
   [88] (webpack)-dev-server/~/strip-ansi/~/ansi-regex/index.js 135 bytes 0 [built]
   [90] (webpack)/hot/log-apply-result.js 1.02 kB 0 [built]
   [96] (webpack)/~/node-libs-browser/~/url/url.js 23.3 kB 0 [built]
   [98] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js 52 bytes 0 [built]
     + 84 hidden modules

ERROR in ./~/css-loader?sourceMap!./~/vue-loader/lib/style-compiler?"id":"data-v-32781a4c","scoped":false,"hasInlineConfig":false!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module build failed: SyntaxError: Unexpected token 
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:414:25)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:313:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at loadLoader (/Users/me/Code/vue/vue-example/node_modules/webpack/node_modules/loader-runner/lib/loadLoader.js:13:17)
    at iteratePitchingLoaders (/Users/me/Code/vue/vue-example/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/Users/me/Code/vue/vue-example/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
 @ ./~/vue-loader/~/vue-style-loader!./~/css-loader?sourceMap!./~/vue-loader/lib/style-compiler?"id":"data-v-32781a4c","scoped":false,"hasInlineConfig":false!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-272 13:3-17:5 14:22-280
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

我在 vue-cli 版本 2.8.1（最新）和早期版本（2.5.0）上都试过了，但没有成功。

有人知道如何解决这个问题吗？似乎默认值应该开箱即用......

我是 Vue / webpack 的新手，所以请放轻松。

【问题讨论】：

看起来像是 CSS 语法问题。

我找到了 github repo 并按照说明操作，它对我有用。你已经安装了 npm 还是新安装的？您在运行 npm install 时是否看到任何错误？我有时不得不运行 npm install 两次才能修复错误。你可以试试。

我也有同样的问题。我使用的是 Windows 10。尽管有消息，但这不是 CSS 问题。即使你只是在你的 .vue 中放了一个空白的 标签，它也会发生。我的预感是我的全局 npm 包中的某些东西是罪魁祸首。我要找一个虚拟机做一个测试。

AWS Linux 上的同样问题。

是的，我需要获取最新版本的节点和 npm。谢谢大家！

【参考方案1】：

我解决这个问题的方法是：

npm 缓存清理 npm 更新 -g 重新安装 node.js (https://nodejs.org/en/download/) - v6.10.1

我使用的是 Windows 10。

【讨论】：

我的 brew 版本已经过时了。因此，来自 node.js 网站的安装程序并重做 npm install 就成功了。

【参考方案2】：

哪个版本是您的节点。 我的是v7.1.0

你可能需要

npm cache clean
npm update -g