HBulider を使用してネイティブ APP をパッケージ化する Vue Web アプリ プロジェクトの紹介

この記事では、HBulider を使用してネイティブ APP をパッケージ化する Vue Webapp プロジェクトの詳細な説明を主に紹介します。その内容は非常に優れているので、参考として共有します。

Vue Web アプリ プロジェクトは、HBulider を通じてネイティブ APP をパッケージ化します

1。Web アプリ プロジェクトは、vue-cli によって構築されたスキャフォールディングを通じて記述され、次に、次のように webpack を通じてデプロイメント ファイル リストにパッケージ化されます。

2. HBulider を開き、ディレクトリを開き、このリストを選択して、プロジェクト名を自分で変更します。 (または、新しいアプリ プロジェクトを直接作成し、その中にアンパッケージとマニフェストを保持し、その他を独自の dist ファイルの内容に置き換えます)

今回は Web プロジェクトなので、次のように変更する必要がありますAPP プロジェクト (新しいアプリを直接作成する場合は、この手順を無視してください)

変更前:

変更後:

3. HB でこの dist を開くと、マニフェスト.json ファイル。このファイルは、アプリケーション情報を構成するために使用されます。エントリ ファイルは適切に対応している必要があります。VUE を使用して単一ページのアプリケーションを作成したため、index.html は 1 つだけです。

次に、プロジェクトの要件に従ってアイコンを設定します

HB の詳細は以下にリストされています。

4. 次に、実機デバッグ用に USB ケーブルで携帯電話をコンピュータに接続します。 （USBケーブルで接続する必要があります。HBは無線接続には対応していません。） Windowsパソコンの場合は360アシスタントなどを使えば解決できることは言うまでもありません。携帯電話が Android の場合、Apple コンピュータではそれほど簡単ではありません。その後、Baidu と自分自身の調査を通じてそれを理解しました。その方法は、Apple コンピュータに Android File Transfer ソフトウェアをダウンロードすることです。課金したい場合は、「トライアル」をクリックするだけです。電話機で USB デバッグをオンにし、内蔵 CD を選択して Apple コンピュータに接続する必要があります。電話自体にもプロンプトがあります (本当に心温まる)

接続が成功したら、実デバイスのデバッグを開始できます。

注: インターネット上の多くの人々は、VUE プロジェクトを開いたときに空であると言っています。config の下にあるindex.js の bulid モジュールのエクスポート パスを変更することを忘れないでください。 Index.html のコンテンツは script タグを通じて導入されており、パスが間違っているため、開いたときに必ず空白になります。まずデフォルトのパスを見てみましょう。

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 ルーティング設定のデフォルト モードは hash です。履歴モードに変更すると、開いたときに空白になります。したがって、ハッシュに変更するか、モード設定を直接削除して、それをデフォルトにします。

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

5. 実機テストで問題がなければ。その後、それを実際に APP にパッケージ化できます。

パッケージが正常にパッケージ化されたら、手動でダウンロードするか、ダウンロードしたディレクトリを直接開くことができます。この xxxx.apk ファイルを QQ などを介して携帯電話に送信し、クリックしてインストールします。それでおしまい。

6. 最後に、携帯電話で効果を表示します。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

パッケージ化後に Vue プロジェクトを開いた後に空白のページが表示される問題を解決する方法

Vue のルーティング履歴モードでパッケージ化した後に空白のページが表示される問題を解決する方法

はじめにVue SPA シングルページ アプリケーションの最初の画面の最適化へ

以上がHBulider を使用してネイティブ APP をパッケージ化する Vue Web アプリ プロジェクトの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。