source

vue-cli 로더가 webpack-loader에 대한 기본 init에서 작동하지 않음

goodcode 2022. 8. 13. 12:11
반응형

vue-cli 로더가 webpack-loader에 대한 기본 init에서 작동하지 않음

나는 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은 처음이니까 살살 다뤄주세요.

이 문제를 해결한 방법은 다음과 같습니다.

  • npm 캐시 클린
  • npm 업데이트 -g
  • 재설치된 node.debug(https://nodejs.org/en/download/) - v6.10.1

Windows 10을 사용하고 있습니다.

어떤 버전이 노드인지 확인합니다.저는 v7.1.0입니다.

필요할지도 모른다

npm cache clean
npm update -g

언급URL : https://stackoverflow.com/questions/42966043/vue-cli-loader-not-working-with-default-init-for-webpack-simple

반응형