vue cli 3.0 유 니 버 설 패키지 설정 코드,1,2 급 디 렉 터 리 구분 없 음

1.프로젝트 루트 디 렉 터 리 에 vue.config.js 를 새로 만 들 고 다음 설정 을 하면 됩 니 다.

module.exports={
 publicPath:'',
};

추가 지식:Vue-CLI 3.0 패키지 설정 변경
실제 프로젝트 개발 에서 우 리 는 보통 vue,vue-cli 를 직접 사용 하여 프로젝트 를 구축한다.vue 프레임 워 크 의 취 지 는 초보 자 들 이 쉽게 손 을 쓸 수 있 도록 하 는 것 입 니 다.그래서 포장 배치 의 일부 물건 에 대해 vue 의 비 계 는 완벽 한 포장 을 해 주 었 습 니 다.우 리 는 기 존의 효 과 를 얻 을 수 있 고 포장 배치 문 제 를 너무 많이 걱정 하지 않 아 도 됩 니 다.
초기 에 Vue-CLI 2.0 구축 프로젝트 를 사용 할 때 저 희 는 build 디 렉 터 리 에서 웹 팩 설정 항목 을 직접 수정 할 수 있 습 니 다.
그러나 Vue-CLI 3.0 에 서 는 웹 팩 설정 에 대해 2 차 패 키 징 을 해 주 었 습 니 다.3.0 버 전 으로 프로젝트 를 만 들 때 저 희 는 원생 웹 팩 설정 에 관심 을 가 질 필요 가 없습니다.Vue-CLI 3.0 공식 API 만 보면 됩 니 다.
vue-cli 3.0 의 패키지 설정
vue-cli 3.0 설치
npm install -g @vue/cli
vue-cli 3.0 구축 프로젝트 사용 하기
vue create my-project
프로젝트 디 렉 터 리 는 다음 과 같 습 니 다.

만 든 항목 에는 웹 팩 의 프로필 이 존재 하지 않 습 니 다.vue 프레임 워 크 에 서 는 웹 팩 을 어떻게 설정 하 는 지 알 필요 가 없 기 때문에 프로젝트 루트 디 렉 터 리 에 vue.config.js 설정 파일 을 만 들 고 vue-cli 비계 에 포 장 된 간단 한 설정 을 통 해 이 루어 지면 됩 니 다.
Vue 비계 도구 의 취 지 는 사용자 설정 을 더욱 간단하게 하 는 것 입 니 다.그래서 Vue-CLI 3.0 에서 웹 팩 의 일부 설정 항목 을 우리 에 게 직접 노출 시 키 지 않 고 웹 팩 을 바탕 으로 더 간단 한 API 를 다시 밀봉 하여 사용 할 수 있 도록 합 니 다.이렇게 하면 웹 팩 을 사용 하지 않 더 라 도 간단 한 설정 을 통 해 비계 의 포장 설정 과 포장 절 차 를 변경 할 수 있 습 니 다.
실행 패키지:npm run build

vue-cli 비계 에서 기본적으로 생 성 된 패키지 디 렉 터 리 는 dist 디 렉 터 리 입 니 다.설정 을 통 해 패키지 로 생 성 된 디 렉 터 리 이름 을 바 꾸 려 면 vue.config.js 를 만 들 고 outputDir 를 통 해 설정 할 수 있 습 니 다.
vue.config.js

module.exports = {
 outputDir: 'xiaochengzi' //      xiaochengzi
}

재 포장:npm run build

vue-cli 는 웹 팩 의 output.path 를 다시 봉 인 했 기 때문에 우 리 는 하나의 키 값 을 통 해 outputDir:'xiaochengzi'를 설정 할 수 있 습 니 다.사실 비계 밑 에 사용 되 는 것 은:output.path 입 니 다.

//vue-cli api
outputDir: 'xiaochengzi'

//     webpack    output.path  
output: {
 path: path.resolve(__dirname, 'xiaochengzi')
}

이상 은 예 를 들 어 더 많은 vue-cli 설정 수 요 는 공식 문 서 를 참고 하 십시오:Vue-CLI(정부의 상세 한 설명 을 살펴보다.)
특수 수요
프로젝트 에 특별한 설정 수요 가 있 으 면 Vue-CLI 가 공식 적 으로 제공 하 는 설정 API 에서 이 루어 지지 않 으 면 공식 적 으로 예약 한 configureWebpack 을 통 해 원생 웹 팩 을 설정 할 수 있 습 니 다.
작은 밤 을 들다.
방금 만 든 프로젝트 루트 디 렉 터 리 에 static 디 렉 터 리 를 새로 만 들 고 static 디 렉 터 리 에 index.json 파일 을 추가 합 니 다.

패키지 실행 을 통 해 저 희 는 브 라 우 저 를 통 해 localhost:8080/index.json 을 방문 하여 제 이 슨 대상 에 직접 접근 할 수 있 습 니 다.설정 하지 않 은 상태 에서 브 라 우 저 방문 은 다음 과 같 습 니 다.(또는 초기 페이지)

configureWebpack 을 통 해 원생 웹 팩 을 설정 합 니 다:

const path = require('path');
module.exports = {
 configureWebpack: { //     webpack     
 devServer: {
  contentBase: [path.resolve(__dirname, 'static')]
 }
 }
}

이 설정 표지:지정 한 파일 에 접근 할 때 웹 팩-dev-server 서 비 스 는 포장 한 dist 디 렉 터 리 에서 파일 을 찾 을 뿐만 아니 라 static 디 렉 터 리 에서 파일 을 찾 습 니 다.일치 하 는 파일 을 찾 으 면 일치 하 는 파일 내용 도 되 돌려 줍 니 다.
다시 포장 실행:npm run serve
브 라 우 저가 localhost:8080/index.json 에 접근 한 결 과 는 다음 과 같 습 니 다.

요약:Vue-CLI 3.0 은 웹 팩 의 대량의 API 패 키 징 을 도와 주 었 을 뿐만 아니 라 자주 사용 되 지 않 는 설정 인 터 페 이 스 를 예약 하여 우리 프로젝트 의 개발 을 편리 하 게 하고 우리 의 학습 난이 도 를 줄 일 수 있 습 니 다(웹 팩 에 대해 잘 모 르 더 라 도 읽 기Vue-CLI 공식 문서쉽게 웹 팩 설정 을 할 수 있 습 니 다).
이상 의 vue cli 3.0 유 니 버 설 패키지 설정 코드 는 1,2 급 디 렉 터 리 를 가리 지 않 고 모두 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 이 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.