vue-cli加载器不能使用默认的init for webpack-simple

Question

I am learning Vue.JS. I installed the cli and created a project:

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

I get this error message:

> 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

I tried this with both vue-cli version 2.8.1 (latest) and an earlier one (2.5.0) with no luck.

Anyone know how to fix this? Seems like the defaults should work out of the box...

I'm all new to Vue / webpack so go easy on me.

Answer 1

Which version is your node. Mine is v7.1.0

you may need

npm cache clean
npm update -g

Answer 2

The way I resolved this was to:

• npm cache clean
• npm update -g
• reinstalled node.js ( https://nodejs.org/en/download/ ) - v6.10.1

I am using Windows 10.