vue cli 구성, npm run dev error

Question

안녕하세요 이번에 vue cli 를 이용해보려고 하는데 인터넷 강의를 보고서 그대로 따라했는데 npm run dev 를 하는 순간 에러로그가 마구 올라오면서 안되는데 구글링을 마구해봐도 해답이 나오지가 않네요.한번 보시고 이에 대한 해답을 아시는분이 있으시다면 답변 부탁드립니다. vue cli 작업 순서는 아래와 같이 하였습니다.1. cd webpack-simple2. npm install -g vue-cli3. vue init webpack-simple4. npm install5. npm run dev 아래는 터미널에 찍힌 에러로그 입니다.'cross-env'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! webpack-simple&#64;1.0.0 dev: &#96;cross-env NODE_ENV&#61;development webpack-dev-server --open --hot&#96; npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the webpack-simple&#64;1.0.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. package.json { &#34;name&#34;: &#34;webpack-simple&#34;, &#34;description&#34;: &#34;A Vue.js project&#34;, &#34;version&#34;: &#34;1.0.0&#34;, &#34;author&#34;: &#34;(메일 공간)&#34;, &#34;license&#34;: &#34;MIT&#34;, &#34;private&#34;: true, &#34;scripts&#34;: { &#34;dev&#34;: &#34;cross-env NODE_ENV&#61;development webpack-dev-server --open --hot&#34;, &#34;build&#34;: &#34;cross-env NODE_ENV&#61;production webpack --progress --hide-modules&#34; }, &#34;dependencies&#34;: { &#34;vue&#34;: &#34;^2.4.4&#34; }, &#34;browserslist&#34;: [ &#34;> 1%&#34;, &#34;last 2 versions&#34;, &#34;not ie <&#61; 8&#34; ], &#34;devDependencies&#34;: { &#34;babel-core&#34;: &#34;^6.26.0&#34;, &#34;babel-loader&#34;: &#34;^7.1.2&#34;, &#34;babel-preset-env&#34;: &#34;^1.6.0&#34;, &#34;babel-preset-stage-3&#34;: &#34;^6.24.1&#34;, &#34;cross-env&#34;: &#34;^5.0.5&#34;, &#34;css-loader&#34;: &#34;^0.28.7&#34;, &#34;file-loader&#34;: &#34;^1.1.4&#34;, &#34;vue-loader&#34;: &#34;^13.0.5&#34;, &#34;vue-template-compiler&#34;: &#34;^2.4.4&#34;, &#34;webpack&#34;: &#34;^3.6.0&#34;, &#34;webpack-dev-server&#34;: &#34;^2.9.1&#34; } }

devjang · Answer

순서가 바뀐 것 같아요 2&#61;> 3 &#61;> 1 &#61;> 4&#61;> 5&#61;> 6

프개 · Answer

1번에 webpack-simple 은 제가 webpack-simple 이라는 폴더를 만들어서 접근한 것 뿐이었는데 그걸 안적었네요 근데 어차피 vue init 을 하더라도 webpack-simple 이라는 폴더가 따로 생성되는건 아니라서 순서가 틀린건 아닌것 같습니다. 1번은 제거하고 봐도 무관합니다.

bosskmk · Answer

경로 문제 인거 같은데요. cross-env 를 못찾네요.package.json 에 scripts 에 cross-env를 실행하는데 경로를 못찾으니 에러가 발생 했습니다.npm install이 package.json 파일이 있는 폴더(프로젝트 최상위)에서 실행 되어 패키지들이 잘 설치가 되었나요?아니면 환경변수에 npm이 등록 되었나요?

프개 · Answer

npm install 하면서 package.json 에 적힌 필요한 패키지들을 다 설치하지 못하는 것 같습니다.

haze · Answer

cross-env 라는 걸 설치하고 환경변수에 등록해야하지 않을까요? &#96;npm i -g cross-env&#96;같은 식으로요

devjang · Answer

cross-env는 설치 안해도 됩니다경로가 틀렸어요 그냥 터미널에 webpack-dev-server 해보세요

프개 · Answer

webpack-dev-server : 'webpack-dev-server' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다.이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오.위치 줄:1 문자:1&#43; webpack-dev-server&#43; ~~~~~~~~~~~~~~~~~~ &#43; CategoryInfo : ObjectNotFound: (webpack-dev-server:String) [], CommandNotFoundException &#43; FullyQualifiedErrorId : CommandNotFoundException 라고 뜨네요. 답변이 올라온걸 늦게봤네요.

devjang · Answer

&#34;dev&#34;: &#34;cross-env NODE_ENV&#61;development webpack-dev-server --open --hot&#34;,위 부분에서 cross-env NODE_ENV&#61;development 이것만 삭제해보시겠어요?

프개 · Answer

삭제하였습니다.

devjang · Answer

npm run dev 명령어 실행시 결과가 어떻게 되나요?

프개 · Answer

'webpack-dev-server'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다.npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! webpack-simple&#64;1.0.0 dev: &#96;webpack-dev-server --open --hot&#96;npm ERR! Exit status 1npm ERR!npm ERR! Failed at the webpack-simple&#64;1.0.0 dev 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:\Users\hansol\AppData\Roaming
pm-cache\_logs\2017-12-23T08_09_32_096Z-debug.log 이렇게 위와 같이 나옵니다/

devjang · Answer

해당 프로젝트에서 npm install 명령어 입력해서 한번 더 체크해보시고그래도 안되면 npm i -g webpack-dev-server 입력해서 전역설치하고 해보시겠어요?

프개 · Answer

npm install 하고 난 뒤 npm run dev 명령어를 입력해도 같은 결과가 나왔고npm i -g webpack-dev-server 하고 난 뒤에 설치 과정에서 아래와 같은 문구가 나왔습니다.npm WARN webpack-dev-server&#64;2.9.7 requires a peer of webpack&#64;^2.2.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself. npm WARN webpack-dev-middleware&#64;1.12.2 requires a peer of webpack&#64;^1.0.0 || ^2.0.0 || ^3.0.0 but none is installed. You must install pe er dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents&#64;1.1.3 (node_modules\webpack-dev-server
ode_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents&#64;1.1.3: wanted {&#34;os&#34;:&#34;darwin&#34;,&#34;arch&#34;:&#34;any&#34;} (current: {&#34; os&#34;:&#34;win32&#34;,&#34;arch&#34;:&#34;x64&#34;}) &#43; webpack-dev-server&#64;2.9.7 added 402 packages in 37.1s 이후에 npm run dev 했을 때 실행은 되지 않았고 추가적인 문구가 더 나왔습니다.PS C:\Users\hansol\Desktop\folder\codingStudy\inflearn_FrontEnd\Vue\6.singleFileComponent\webpack-simple> npm run dev > webpack-simple&#64;1.0.0 dev C:\Users\hansol\Desktop\folder\codingStudy\inflearn_FrontEnd\Vue\6.singleFileComponent\webpack-simple > webpack-dev-server --open --hot module.js:538 throw err; ^ Error: Cannot find module 'webpack' at Function.Module._resolveFilename (module.js:536:15) at Function.Module._load (module.js:466:25) at Module.require (module.js:579:17) at require (internal/module.js:11:18) at Object.<anonymous> (C:\Users\hansol\AppData\Roaming
pm
ode_modules\webpack-dev-server\lib\Server.js:22:17) at Module._compile (module.js:635:30) at Object.Module._extensions..js (module.js:646:10) at Module.load (module.js:554:32) at tryModuleLoad (module.js:497:12) at Function.Module._load (module.js:489:3) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! webpack-simple&#64;1.0.0 dev: &#96;webpack-dev-server --open --hot&#96; npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the webpack-simple&#64;1.0.0 dev 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:\Users\hansol\AppData\Roaming
pm-cache\_logs\2017-12-23T08_20_33_850Z-debug.log 계속 실시간으로 신경써주셔서 감사합니다. 근데 도와주시는 것 만큼 잘 되지않아서 죄송스럽네요.

devjang · Answer

webpack 모듈을 못찾네요 webpack도 전역 설치하시고 한번 더 해보세요 ㅎㅎ

프개 · Answer

원래 webpack-simple 을 설치하려고 했던지라npm i -g webpack-simple 을 해보니 맨 첫 번째 줄 제외하고 아래와 같은 문구가 나왔네요.PS C:\Users\hansol\Desktop\folder\codingStudy\inflearn_FrontEnd\Vue\6.singleFileComponent\webpack-simple> npm i -g webpack-simple npm ERR! code ENOVERSIONS npm ERR! No valid versions available for webpack-simple npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\hansol\AppData\Roaming
pm-cache\_logs\2017-12-23T08_33_46_459Z-debug.log그래서 그냥 npm i -g webpack 을 해서 설치하였고npm run dev 해본 결과 아까 위에 것 그대로 webpack 모듈을 못찾는다고 나옵니다.혹시해서 npm i -g webpack-module 도 해봤는데.. 마찬가지네요PS C:\Users\hansol\Desktop\folder\codingStudy\inflearn_FrontEnd\Vue\6.singleFileComponent\webpack-simple> npm run dev > webpack-simple&#64;1.0.0 dev C:\Users\hansol\Desktop\folder\codingStudy\inflearn_FrontEnd\Vue\6.singleFileComponent\webpack-simple > webpack-dev-server --open --hot module.js:538 throw err; ^ Error: Cannot find module 'webpack' at Function.Module._resolveFilename (module.js:536:15) at Function.Module._load (module.js:466:25) at Module.require (module.js:579:17) at require (internal/module.js:11:18) at Object.<anonymous> (C:\Users\hansol\AppData\Roaming
pm
ode_modules\webpack-dev-server\lib\Server.js:22:17) at Module._compile (module.js:635:30) at Object.Module._extensions..js (module.js:646:10) at Module.load (module.js:554:32) at tryModuleLoad (module.js:497:12) at Function.Module._load (module.js:489:3) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! webpack-simple&#64;1.0.0 dev: &#96;webpack-dev-server --open --hot&#96; npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the webpack-simple&#64;1.0.0 dev 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:\Users\hansol\AppData\Roaming
pm-cache\_logs\2017-12-23T08_20_33_850Z-debug.log

devjang · Answer

webpack 모듈이아니라npm i -g webpack을 하셔야해요~ 정 안되시면 다 밀고 vue-cli에서 webpack 심플로 다시 해보는 걸 추천합니다!

프개 · Answer

npm i -g webpack 을 먼저 한 뒤에 npm run dev 를 해봤는데 안되어서 webpack-module 도 한번 해봤습니다.vue-cli 에서 webpack-simple 을 다시 해보는건 제가 컴퓨터 포맷까지하고 다시해본지라 다시해도 될 것 같지는 않습니다...ㅜㅜ

devjang · Answer

왜 글로벌 웹팩 모듈을 못찾을까요 Cannot find module 'webpack' 으로 검색해서 찾아보시길.. ㅠㅠ도움이못되었네요

프개 · Answer

그래도 시간내서 봐주셔서 정말 감사드립니다.

동대문사단 · Answer

npm install --only&#61;dev 로 해보세요

vue cli 구성, npm run dev error

22개의 답변

#vue-cli 목록