패키징 후 Vue 프로젝트를 열 때 빈 페이지 문제를 해결하는 방법

이 글에서는 Vue 프로젝트를 패키징한 후 공백을 여는 방법을 주로 소개합니다. 내용이 꽤 괜찮아서 참고용으로 올려보겠습니다.

인터넷에서 많은 사람들은 VUE 프로젝트가 Webpack을 통해 패키징되고 생성되었다고 말합니다. HBulider에서 패키징한 후 휴대폰에서 열면 비어 있습니다. 가장 큰 이유는 경로 문제입니다.

1. config에서 index.js의 bulid 모듈 내보내기 경로를 변경하는 것을 잊지 마세요. index.html의 콘텐츠는 스크립트 태그를 통해 소개되고 경로가 잘못되었기 때문에 열면 확실히 비어 있게 됩니다. 먼저 기본 경로를 살펴보겠습니다.

module.exports = {
 build: {
 env: require('./prod.env'),
 index: path.resolve(__dirname, '../dist/index.html'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,

assetsPublicPath 기본값은 루트 디렉터리인 '/'입니다. index.html과 static은 같은 디렉토리에 있습니다. 그래서 './'

2로 한 가지 더 주의할 점이 있습니다. src의 router/index.js 라우팅 구성의 기본 모드는 해시입니다. 히스토리 모드로 변경하면 열 때 공백이 됩니다. 그러니 해시로 변경하거나 모드 구성을 직접 삭제하여 기본값으로 설정하세요. 기록 모드를 사용해야 하는 경우 모든 상황을 포괄하는 후보 리소스를 서버에 추가해야 합니다. URL이 정적 리소스와 일치하지 않으면 앱이 의존하는 페이지인 index.html을 반환해야 합니다.

// mode: 'history' // 默认hash

Vue 프로젝트를 패키징하는 방법을 모르신다면 제가 작성한 또 다른 자세한 튜토리얼을 읽어보세요. Vue webapp 프로젝트는 HBulider APP을 통해 네이티브로 패키징됨

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하세요. !

관련 권장 사항:

라우팅 기록 모드가 Vue에 패키징된 후 페이지가 비어 있는 문제를 해결하는 방법

Vue WeChat 인증 로그인 프론트엔드와 백엔드 분리 문제를 해결하는 방법

#🎜🎜 #

#🎜🎜 #

위 내용은 패키징 후 Vue 프로젝트를 열 때 빈 페이지 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!