vue-cli 3.0 의 vue.config.js 를 어떻게 설정 하 는 지 자세히 알 아 보기

본 고 는 vue-cli 3.0 의 vue.config.js 를 어떻게 설정 하 는 지 소개 하 였 으 며,구체 적 으로 다음 과 같다.
vue-cli 3 영문 문서
vue-cli 3 중국어 문서
webpack 4 plugins
webpack-chain
TLDR
vue-cli 3 과 2 버 전 은 큰 차이 가 있 습 니 다.

vue-cli 3 의 github 창 고 는 기 존의 독립 된 github 창고 에서 vue 프로젝트 로 이전 되 었 습 니 다

vue-cli 3 의 프로젝트 구 조 는 vue-cli 2 의 기 존 구 조 를 완전히 버 렸 고 3 의 디자인 은 더욱 추상 적 이 고 간결 하 다(여기 서 상세 하 게 소개 할 수 있다)

vue-cli 3 은 웹 팩 4 를 기반 으로 만 든 것 입 니까?vue-cli 2 입 니까?아니면 webapck 3

입 니까?

vue-cli 3 의 디자인 원칙 은'0 설정'

이다.

vue-cli 3 은 vue ui 명령 을 제공 하여 시각 화 된 설정 을 제공 하여 더욱 인성 화 된

vue-cli 3 도 rollup 의 0 설정 방향 을 배 웠 기 때문에 프로젝트 초기 화 후 익숙 한 build 디 렉 터 리 가 없 었 고 webpack.base.config.js,webpack.dev.config.js,webpack.prod.config.js 등 설정 파일 도 없 었 습 니 다.
그렇다면 우 리 는 어떻게 자신의 프로젝트 를 설정 해 야 합 니까?
사실 이 모든 것 은 vue-cli 3 의 프로젝트 가 초기 화 되 어 개발 자 들 이 80%를 해 결 했 고 심지어 대부분의 경우 웹 팩 설정 을 해 결 했 기 때 문 입 니 다.
위 기능 은@vue/cli-service 에 의존 하여 처리 하 는 것 입 니 다.node 를 열 면modules 디 렉 터 리 아래@vue 에 있 는 cli-service 를 한 번 보 세 요.익숙 한 느낌 을 찾 았 나 요?

이렇게 많은 말 을 했 습 니 다.개발 자 는 실제 개발 과정 에서 자신 이 설정 을 수정 해 야 할 부분 이 있 을 것 입 니 다.그러면 어떻게 해 야 합 니까?
이 점 은 프로젝트 루트 디 렉 터 리 에 vue.config.js 를 수 동 으로 새로 만들어 야 합 니 다.여기 서 제 가 제공 하 는 기본 템 플 릿[vue.config.js]을 참고 하 십시오.
그래서 지금 모든 문제 가 집중 되 었 습 니 다.-이 프로필 을 어떻게 수정 해 야 합 니까?
몇 가지 간단 한 설정,예 를 들 어 여러 페이지,인터페이스 에이전트,여러분 은 스스로 공식 doc 를 볼 수 있 고 글 의 맨 위 에 제공 되 어 있 습 니 다.
원래 웹 팩 의 설정 을 바 꾸 려 면 어떻게 해 야 합 니까?
vue-cli 3 의 cli-service 가 웹 팩 4 에 웹 팩-chain 플러그 인 을 도입 하 는 동시에 설정 을 고도 로 추상 화 했 기 때문에 개발 자가 원 하 는 대로 설정 을 수정 하려 면 조작 방식 이 이전 보다 더욱 어렵 습 니 다.제 가 직접 실천 한 다음 에 몇 가 지 를 총 결 하여 여러분 께 참고 하 시기 바 랍 니 다.
우선,수정 점 은 vue.config.js 에 있 습 니 다.

configureWebpack: (config) => {
//   /    ，         
},

chainWebpack: (config) => {
//     
}

loaderOptions: {
   css: {
    // options here will be passed to css-loader
   },
   postcss: {
    // options here will be passed to postcss-loader
   }
}

구체 적 인 조작 은 문장의 맨 위의 링크 를 볼 수 있 으 며,여 기 는 더 이상 군말 하지 않 는 다.
핵심 은 cmd 에서 vue inspect>output.js 를 두 드 리 면 최종 적 으로 발 효 된 웹 팩 설정 정 보 를 얻 을 수 있 습 니 다.cli-service 소스 코드 를 보 러 가 는 것 을 줄 일 수 있 습 니 다.
그리고 나 서 나 는 밤 을 들 었 다.
제 프로젝트 에 서 는 eslint 설정 을 수정 하여 제 프로젝트 의 src/lib 디 렉 터 리 를 검사 하지 않도록 해 야 합 니 다.외부 라 이브 러 리 파일 이기 때 문 입 니 다.
첫 번 째 단계:vue inspect>output.js
두 번 째 단계:output.js 에서 eslint 관련 설정 을 검색 한 결과 다음 과 같 습 니 다.

세 번 째 단계:제 가 고 칠 것 은 exclude 설정 항목 임 을 확 인 했 습 니 다.
네 번 째 단계:mozilla-neutrino/webpack-chain전역 검색 exclude,결 과 는 다음 과 같 습 니 다.

STEP 5:exclude 가 한 번 밖 에 나타 나 지 않 았 기 때문에 살짝 웃 으 면 반 한다.하지만 include 를 보 았 습 니 다.이어서 include 를 찾 았 습 니 다.결 과 는 다음 과 같 습 니 다.

여섯 번 째 단계:include 의 쓰기 방법 을 참고 하여 다음 과 같이 유추 합 니 다.

마지막 으로 vue inspect>output.js 에서 보 겠 습 니 다.

요약 하면 웹 팩-chain 을 몇 번 더 사용 한 후에 저 를 믿 으 세 요.많은 규칙 을 발견 할 수 있 습 니 다.vue-cli 3 도 간단 합 니 다.
후기
새로운 프로젝트 에 착수 하려 고 할 때 이 프로젝트 의 구조 와 ui 구성 요소 등 을 미리 생각해 보 세 요.
우리 프로젝트
1.vant UI 구성 요소 사용
2.axios 서비스 패키지
3.경로 분할 사용(history 기반)
4.경로 전환 애니메이션
。。。
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.