vue-cli 3 프로젝트 를 vue-cli 4 로 업그레이드 하 는 방법 요약

이것 은 제 가 이전에 설정 한vue-cli 3 기반 전단 H5 템 플 릿 업그레이드입 니 다.주로 vue-cli 3 항목 을 vue-cli 4 로 업그레이드 하고 오래된 플러그 인 을 삭제 합 니 다.플러그 인 버 전 은 현재(2020-03-19)최고 버 전(많은 웹 팩 플러그 인 버 전 업그레이드)으로 업그레이드 되 었 습 니 다.업그레이드 가 끝 난 후에 도 메 인 이름 프 록 시 설정,공식 업그레이드 문서시 켜,시 켜.를 추가 합 니 다.
공식 문서 의 업그레이드 에 따라 많은 구 덩이 를 만 날 수 있 습 니 다.😂，설정 이 완료 되면 바로 사용 할 수 있 습 니 다.
주요 기능

webpack 패키지 확장

css:sas 지원,normalize.css,mixin.scss、_variables.scss

vw,remi 레이아웃

다 중 도 메 인 네 임 에이전트 크로스 도 메 인 설정

eslint+표준 설정

상용 라 이브 러 리 cdn 도입

경로 설계,로그 인 차단

axios,api 디자인

vuex 상태 관리

프로젝트 주소:vue-cli4-H5
demo 포장 주소:https://zhouyupeng.github.io/2020-03-19/dist/#/
다음은 업그레이드 절차 와 총 결 입 니 다.
1.우선,전역 에 최신 Vue CLI 를 설치 합 니 다.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

설 치 된 cli 버 전 검사

vue -V #   :@vue/cli 4.x.x   @vue/cli 4    ( vue cli 3       3.x.x )

제 가 설치 하고 봤 는데 3.X 버 전이 라 서 vue/cli 를 먼저 마 운 트 해제 했 어 요.
2.프로젝트 루트 디 렉 터 리 에서 실행

vue upgrade

제시 에 따라 업 그 레이 드 를 하면 오류 와 해결 방법 을 보고 할 수 있다.
WARN "css.modules" option in vue.config.js is deprecated now, please use "css.requireModuleExtension" instead.
css-loader v3 업그레이드 후 css.requireModuleExtension 을 css.modules 대신 사용 합 니 다.

css.loader Options 전역 도입 변수 와 mixin 오류
sass-loader v7 이전 에는 data:',그 다음 에는 prependData:',
prependData: '@import "style/_mixin.scss"';이전
data: '@import "style/_mixin.scss"';

ESLint 업그레이드 후 standard 를 사용 한 것 은 Prettier 가 잘못 한 것 이 아니 기 때 문 입 니 다.
업그레이드 후 4 개의 플러그 인 을 따로 설치 해 야 합 니 다.

npm install eslint-plugin-import --save-dev
npm install eslint-plugin-node --save-dev
npm install eslint-plugin-promise --save-dev
npm install eslint-plugin-standard --save-dev

이uglifyjs-webpack-plugin공식 적 으로 도 태 된 플러그 인 을 삭제 하고 웹 팩 4.x 가 가 져 온 콘 솔 설정 으로 변경 합 니 다.

업그레이드 과정 에서 node 가 제시 한 오 류 를 다시 고치 면 업그레이드 가 완 료 됩 니 다~
vue-cli 3 프로젝트 를 vue-cli 4 로 업그레이드 하 는 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.