Vue プロジェクトは HBuilderX を使用して APP プロセスをパッケージ化します

Vue をアプリにパッケージ化する場合は、Electron、Cordova などのプラグインツールを使用するか、Android Studio、HBuilderX などの開発ツールを直接使用する必要があります。この記事の目的は、HBuilder 開発ツールを使用して Vue プロジェクトをパッケージ化する方法を説明することです。

1. 一般的なプロセスの説明

プロジェクト全体は Vue+HbuilderX (または Hbuilder) を使用して開発されています
Vue を使用して、基本的なページジャンプ、追加、削除、変更、確認などのアプリの基本機能を実現します。
アプリのネイティブ機能を使用する必要がある場合は、関連する UI フレームワーク (mui、nutui など) を使用してください。
実機デバッグ
最後に、HbuilderX を通じて vue プロジェクトをアプリパッケージにパッケージ化します。

2.vueプロジェクトをパッケージ化する

`./`2.1 パッケージ化する前に、図に示すように、vue.config.js ファイルのベースパスをに変更します。

ここに画像の説明を挿入

import {
    
     fileURLToPath, URL } from 'node:url'

import {
    
     defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
    
    
  base:'./', // 如果直接默认打包，打包后静态资源默认为 “/” ，这样会导致找不到静态资源，最后的apk安装以后白屏
  plugins: [
    vue(),
    vueJsx(),
  ],

  resolve: {
    
    
    alias: {
    
    
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

デフォルトで直接パッケージ化された場合、パッケージ化後の静的リソースはデフォルトで「/」となり、静的リソースが見つからず、最終的な APK は白い画面でインストールされます。

2.2. Vue プロジェクトをパッケージ化するには、次のコマンドを実行します。

npm run build

パッケージ化されたdistディレクトリは図の通りで、パッケージ化さ
ここに画像の説明を挿入
れたindex.htmlファイルのルートディレクトリは「./」、他のアセットフォルダ内のjsファイル内の静的リソース参照は一律「./」に変更されます。正しくアクセスできます。ここで、index.html は次のとおりです
ここに画像の説明を挿入

3. HBuilderX を使用して dist 静的ファイルをモバイルアプリにパッケージ化する

HBuilderX の最新バージョンをダウンロードします。HBuilderX はインストール不要の環境に優しいソフトウェアです。
DCloud Developer Center でアカウント登録と開発者認定を完了する
5+App プロジェクトを作成します。デフォルトのファイル構造は次のとおりです。
次のように、プロジェクトフォルダーディレクトリに入り、フォルダー css、img、js、ファイルindex.html を削除し、パッケージ化された dist ディレクトリ内のファイルをこのフォルダーにコピーします。
HBuilderX ソフトウェアを実行 -> テストのために組み込みブラウザで実行します。テスト結果は次のとおりです。

テスト結果に応じてコードの微調整を行う
HBuilderX ソフトウェア、リリース -> ネイティブアプリクラウドパッケージ化、mainfest.json ファイルの構成、最後にプロンプトとガイドラインに従ってパッケージ化します。manifest.json

構成インターフェイスは次のとおりです。
APK を携帯電話にインストールする: HBuilderX ソフトウェアで、「アンパッケージ」->「リリース」->「APK」を開き、APK ファイルを右クリックして携帯電話にインストールします。

添付ファイル: Cordova パッケージ化手順を使用する

Cordova をインストールする
```
npm install -g cordova
```
Cordova プロジェクトを作成する
```
cordova create my-app
```
プロジェクトディレクトリを入力してください
```
cd my-app
```
Android などのプラットフォームを追加する
```
cordova platform add android
```
Vue プロジェクトをデプロイ可能なコードにビルドする
```
npm run build
```
ビルドされたコードを Cordova プロジェクトにコピーします。
```
p -r dist/* www/
```
Cordova プロジェクトをビルドして実行する
```
cordova build android
```