HBulider를 통한 Vue 웹앱 프로젝트 패키징 네이티브 앱 소개

이 글은 주로 HBulider를 통해 Vue 웹앱 프로젝트 패키징 네이티브 APP에 대한 자세한 설명을 소개하고 있는데 내용이 꽤 좋아서 참고용으로 올려봅니다.

Vue webapp 프로젝트는 HBulider를 통해 네이티브 APP를 패키지합니다

1 webapp 프로젝트는 vue-cli로 구축된 스캐폴딩을 통해 작성된 후 webpack을 통해 배포 파일 목록은 다음과 같습니다:

2. HBulider를 열고 디렉터리를 열고 이 목록을 선택하고 변경합니다. 프로젝트 이름을 직접 지정하세요. (또는 직접 새 앱 프로젝트를 만든 다음 패키지 해제 및 매니페스트를 내부에 유지하고 나머지는 자신의 dist 파일 콘텐츠로 바꿉니다.)

#🎜 🎜#

웹 프로젝트이므로 APP 프로젝트로 변경해야 합니다(새 앱을 직접 만드는 경우 이 단계를 무시하세요)

#🎜 🎜## 🎜🎜#변경 전:

변경 후:

3 이 dist를 열면 됩니다. Manifest.json 파일이 있는지 확인하세요. 이 파일은 애플리케이션 정보를 구성하는 데 사용됩니다. 항목 파일이 잘 일치해야 합니다. VUE를 사용하여 단일 페이지 애플리케이션을 작성했기 때문에 index.html이 하나만 있습니다.

그런 다음 아이콘을 구성하세요

HB에서 프로젝트 요구 사항을 구성하면 아래에 자세히 나와 있습니다.

4. 다음으로 실제 머신 디버깅을 위해 USB 케이블로 휴대폰을 컴퓨터에 연결합니다. (USB 케이블로 연결해야 합니다. HB는 무선 연결을 지원하지 않습니다.) 말할 필요도 없이 Windows 컴퓨터는 360 어시스턴트 정도를 사용하면 해결될 수 있습니다. 휴대폰이 Android라면 Apple 컴퓨터에서는 그렇게 쉽지 않습니다. 나중에 바이두와 자체 탐색을 통해서도 알아냈습니다. 방법은 Apple 컴퓨터에 Android 파일 전송 소프트웨어를 다운로드하는 것입니다. 요금을 청구하려면 평가판을 클릭하세요. 휴대폰에서 USB 디버깅을 켜고 내부 CD를 선택하여 Apple 컴퓨터에 연결해야 합니다. 전화 자체에도 프롬프트가 있습니다(정말 마음이 따뜻해집니다)

연결에 성공하면 실제 장치 디버깅을 시작할 수 있습니다.

참고: 인터넷의 많은 사람들은 VUE 프로젝트가 공백으로 열린다고 말합니다. 내보낸 경로입니다. 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은 같은 디렉토리에 있습니다. 그래서 './'로 바꿔줘야 합니다.

주의할 점이 하나 더 있습니다. src의 router/index.js 라우팅 구성의 기본 모드는 해시입니다. 히스토리 모드로 변경하면 열 때 공백이 됩니다. 그러니 해시로 변경하거나 모드 구성을 직접 삭제하여 기본값으로 설정하세요.

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

5. 실제 머신 테스트에서 문제가 없다면. 그런 다음 실제로 이를 APP로 패키징할 수 있습니다.

# 🎜 🎜#

패키지가 성공적으로 패키징된 후 수동으로 다운로드할 수 있습니다. 또는 다운로드 디렉토리에 직접 다운로드하여 엽니다. 이 xxxx.apk 파일을 QQ 등을 통해 휴대폰으로 보내고 클릭하여 설치하세요. 그게 다야.
6. 마지막으로 휴대폰에서 효과를 보여주세요.

이상은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

vue 프로젝트 패키지 시 빈 페이지 문제를 해결하는 방법

# 🎜🎜#

Vue에서 히스토리 모드 패키징 라우팅 후 빈 페이지 문제 해결 방법

Vue SPA 첫 화면 최적화 소개 단일 페이지 애플리케이션# 🎜🎜#

위 내용은 HBulider를 통한 Vue 웹앱 프로젝트 패키징 네이티브 앱 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!