programing

Vuejs에서 "webpack Dev Server invalid Options"를 수정하는 방법

javaba 2022. 9. 3. 17:48
반응형

Vuejs에서 "webpack Dev Server invalid Options"를 수정하는 방법

사용하고 있다@vue/cli v3.7.0그리고 프로젝트를 만들었습니다.vue create myappBabel + Router + node-sass를 사용하여 프로젝트가 정상적으로 설치되었습니다.

그러나 (프로젝트 디렉토리에서) npm run serve를 실행했을 때 다음과 같은 오류가 발생하였습니다.


 INFO  Starting development server...
 ERROR  ValidationError: webpack Dev Server Invalid Options

options.clientLogLevel should be {String} and equal to one of the allowed values

 [ 'info', 'warn', 'error', 'debug', 'trace', 'silent' ]

 (https://webpack.js.org/configuration/dev-server/#devserverclientloglevel)

ValidationError: webpack Dev Server Invalid Options

options.clientLogLevel should be {String} and equal to one of the allowed values

 [ 'info', 'warn', 'error', 'debug', 'trace', 'silent' ]

 (https://webpack.js.org/configuration/dev-server/#devserverclientloglevel)

    at validateOptions (C:\Users\Dell\Desktop\myapp\node_modules\webpack-dev-server\node_modules\schema-utils\src\validateOptions.js:32:11)
    at new Server (C:\Users\Dell\Desktop\myapp\node_modules\webpack-dev-server\lib\Server.js:71:5)
    at serve (C:\Users\Dell\Desktop\myapp\node_modules\@vue\cli-service\lib\commands\serve.js:138:20)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:757:11)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! myapp@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the myapp@0.1.0 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:\Users\Dell\AppData\Roaming\npm-cache\_logs\2019-05-17T19_40_14_984Z-debug.log

나는 노력했다.npm cache clean -f, VueJ의 재설치, 프로젝트의 재작성, 그러나 아무 일도 일어나지 않았습니다.

내 예상은npm run serve일해라!

네, 이 이슈는 지난 몇 시간 동안 갑자기 떠올랐어요@vue/cli새로운 프로젝트에서도 같은 일이 있었습니다.이 문제를 해결하려면 다음을 수행하십시오.

  1. 프로젝트 루트에 다음 파일을 만듭니다.vue.config.js파일을 아직 가지고 있지 않은 경우.

  2. 이 파일에 추가합니다.

module.exports = {
  devServer: {
    clientLogLevel: 'info'
  }
};

그런 다음 프로젝트를 다시 실행합니다.어젯밤 무슨 일이 있었는데clientLogLevel프리셋된 값이 올바르지 않게 되었습니다.

다음은 이 문제에 대해 설명하는 스레드입니다.깃허브

이 에러가 발생하는 이유를 알 수 없지만, 이 옵션을 설정하는 방법은 다음과 같습니다.

1. 작성vue.config.js루트 디렉토리에서

2. 다음 내용을 입력합니다.

module.exports = {
  devServer: {
    clientLogLevel: 'debug'
  }
}

3. 재실행npm run serve

개발 서버 구성에 대한 자세한 내용은 여기를 참조하십시오.

그런 것 같다webpack-dev-server@3.4.0뭔가를 부쉈다.나는 그것을 로 되돌렸다.3.3.1효과가 있는 것 같아요

사용할 때 문서가 조금 헷갈립니다.@vue/cli-service기본적으로 웹 팩을 랩하기 때문입니다.

[이쪽은 솔루션 링크입니다](https://cli.vuejs.org/guide/webpack.html#simple-configuration)

가장 좋은 방법은 다음 웹 사이트를 업데이트하는 것입니다.vue.config.js같은 것으로

configureWebpack: {
    devServer: {
      clientLogLevel: `silent`,
    },
  },

편집했습니다.

node_syslog/@vue/cli-service/lib/syslog/syslog.syslog.syslogs

139행은 다음과 같습니다.

client Log Level: '경고'

대신

client Log Level: '없음'

(편집 - hello-world 앱을 사용하고 있습니다만)

webpack-dev-server는 핫픽스용 v3.4.1로 출시되었습니다.갱신해 주세요.https://github.com/webpack/webpack-dev-server/releases/tag/v3.4.1

node_modules 폴더를 삭제하고 npm 설치 agani

rm -rf node_modules

언급URL : https://stackoverflow.com/questions/56189459/how-to-fix-webpack-dev-server-invalid-options-in-vuejs

반응형