Vue-cli 패키지 파일 로 컬 에서 사용 할 튜 토리 얼 그래 픽 설정

최근 에 만 든 app 에 포 함 된 pc 엔 드 프로젝트 는 비교적 익숙 한 vue-cli 구축 도구 로 프로젝트 를 구축 합 니 다.필요 한 것 은 dist 폴 더 입 구 를 열 어 html 로 컬 정적 파일 을 불 러 올 수 있 습 니 다.포 장 된 index.html 로 파일 을 불 러 오 는 것 입 니 다.그림:
 

 
url 의 경 로 는 우리 가 알 고 있 는 바 에 의 하면 맨 앞 에 있 는 역 슬 래 쉬(/XX)는 사이트 루트 디 렉 터 리 에서 파일 을 검색 하 는 것 을 의미 합 니 다.현재 폴 더 에 비해./또는 역 슬 래 쉬 를 추가 하지 않 는 경로 로 시작 해 야 합 니 다.포장 한 파일 경로 에 문제 가 있 는 것 같 습 니 다.
그래서 webpack.base.conf.js 파일 을 찾 습 니 다.output 옵션 이 있 습 니 다.output 는 webpack 에서 출력 파일 에 대한 설정 입 니 다.가장 많이 사용 되 는 fileName,path 속성 은 출력 파일 의 이름과 프로젝트 에 있 는 위 치 를 지정 합 니 다.PublicPath 는 프로젝트 의 모든 자원 에 기본 경 로 를 지정 할 수 있 고 이 문 제 를 해결 하 는 관건 입 니 다.
공식 문서:webpack output
그림:
 
publicPath 속성 중 3 원 연산 이 있 음 을 볼 수 있 습 니 다.process.env.NODEENV 는 또 뭐 죠?
precess 대상 은 전역 변수 로 응용 프로그램 에서 전역 적 으로 사용 할 수 있 습 니 다(업무 페이지 포함).
process.env 속성 은 사용자 환경 정 보 를 포함 하 는 대상 을 되 돌려 줍 니 다.
process.env.NODE_ENV 는 환경 변 수 를 정의 하 는 데 사 용 됩 니 다.일반적으로 production(생산 환경),development(개발 환경)을 포함 하고 저희 가 webpack 에서 의 각종 설정 도 환경 변수 에 따라 해당 하 는 처 리 를 합 니 다.
생산 환경의 파일 을 처리 하 는 이상 당연히 config.build 대상 을 찾 습 니 다.이 럴 때 config 폴 더 에서 관련 설정 을 찾 습 니 다.

 
index.js 파일 에서 두 대상(dev,build)을 출력 합 니 다.build 대상 에서 assets PublicPath 를'./'또는 빈 문자열 로 변경 하 십시오.이 럴 때 포장 명령 npm run build 를 실행 하고 브 라 우 저 에서 dist 폴 더 의 index.html 를 엽 니 다.
 
하하,파일 을 불 러 왔 습 니 다.하지만 css 파일 에 있 는 font 파일 경 로 를 불 러 올 수 없습니다.이때 font 파일 의 경 로 를 보 세 요.
 
현재 폴 더 에 대한 경 로 를 사 용 했 기 때문에 현재 url 은 현재 css 파일 이 있 는 디 렉 터 리 에 대한 것 입 니 다.이때 dist 폴 더 구 조 는 그림 과 같 습 니 다.

내 가 생각 한 해결 방법 은 font 파일 의 출력 을 단독으로 처리 하 는 것 입 니까?아니면 webpack.base.config.js 파일 입 니까?
 
font 파일 의 출력 경 로 를 변경 합 니 다.자,npm run build
 
땡그랑 땡그랑 불 러 왔 다.
총결산
위 에서 말 한 것 은 소 편 이 소개 한 Vue-cli 설정 패키지 파일 을 로 컬 로 사용 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!