vue-cli 3 패키지 코드 백 스크린 솔 루 션

선언:
최근 vue-cli 3.0 을 사용 하여 모 바 일 웹 엔 드 프로젝트 를 개발 하여 포장 하여 발표 하려 고 합 니 다.이전 프로 세 스 npm run build
문제 가 생 겼 다
dist index.html 파일 을 열 면 흰색 화면 이 발 견 됩 니 다.디 버 깅 을 열 어 보 니 파일 참조 경로 가 잘못 되 었 습 니 다.
이전 경험 치 루트 디 렉 터 리 에 vue.config.js 를 새로 만 듭 니 다.
PublicPath 설정

module.exports = {
  ...
  runtimeCompiler: true,
  publicPath: './'
  ...
}

기 쁘 게 열 었 는데 도 결국 하 얀 화면 이 었 다.디 버 깅 을 열 어 보 니 파일 경로 가 정확 하 다 는 것 을 알 게 되 었 습 니 다.투 덜 거 립 니 다!!
문제점 을 발견 하 다
각종 바 이 두.질문 을 발 견 했 습 니 다.vue-router 의 mode 설정 을 보면 영상 포장 후의 링크 주 소 를 볼 수 있 습 니 다.그리고 제 router 를 보 세 요.

var router = new Router({ 
mode: 'history' 
})

vue-router 가 mode 에 대한 설명:
mode
형식:string
기본 값:"hash"(브 라 우 저 환경)|"abstract"(Node.js 환경)
선택 값:"hash"|"history"|"abstract"
경로 설정 모드:
hash:URL hash 값 을 경로 로 사용 합 니 다.HTML 5 History Api 를 지원 하지 않 는 브 라 우 저 를 포함 한 모든 브 라 우 저 를 지원 합 니 다.
history:HTML 5 History API 와 서버 설정 에 의존 합 니 다.
abstract:Node.js 서버 와 같은 모든 JavaScript 실행 환경 을 지원 합 니 다.브 라 우 저가 없 는 API 를 발견 하면 루트 가 자동 으로 이 모드 로 강제로 들 어 갑 니 다.
문 제 를 해결 하 다
history 모드 를 사용 하면 서버 에 대응 하 는 모드 가 있어 야 history 를 사용 할 수 있 음 을 알 게 되 었 습 니 다.서버 에 설정 이 없 으 면 기본 hash 를 사용 할 수 있 습 니 다.
vue 패키지 프로젝트 이후 화이트 스크린 과 이미지 로드 에 문제 해결 방법 이 없습니다.
vue 패키지 프로젝트 이후 백 스크린 접근 배치.콘 솔 을 보 는 것 은 404 입 니 다.포장 할 때 정적 자원 경 로 를 설정 하지 않 았 기 때 문 입 니 다.원본 파일 은 절대 경로 이 므 로 상대 경로 로 바 꿔 야 합 니 다.
1.흰색 화면 수정 config/index.js

2.그림 을 불 러 올 수 없습니다.build/utils.js 수정

위 와 같은 vue-cli 3 패키지 코드 후 화이트 스크린 에 대한 솔 루 션 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.