序文
少し前に、Hbuilderを使用してフロントエンドWebサイトをWebApp（Android、iosアプリケーション）としてパッケージ化すること
についての記事を書きました。フロントエンドパートナーから多くのプライベートメッセージを受け取りました。Vueによって開発されたプロジェクトをAndroidおよびiosアプリケーションにパッケージ化する方法についての記事を書くことができるかどうか尋ねました。誰もがvueによって開発されたプロジェクトをパッケージ化する方法、そしてそれをandroid、iosインストーラーとして公開し、携帯電話にインストールする方法を説明します。
vue-cli4によって構築されたプロジェクトをパッケージ化する方法
vueによって開発されたアプリケーションに基づいて、現在主流は4.xバージョンのvue / cliを使用して構築されたプロジェクトです。3.xバージョンのvue-cliから、vueのプロジェクト構成を変更するにはどうすればよいですか？
1.vue.config.jsを作成します
まず、プロジェクトのルートディレクトリにvue.confing.jsファイルを作成する必要があります。プロジェクトディレクトリは次のとおりです。
2.Webpackの構成
ではvue.config.js、多くのWebpack構成を記述できます。一般的に使用される構成は、ポート番号の構成、クロスドメインサーバープロキシの構成などです。必要なのは、主にパッケージディレクトリpublicPathを構成することです。そうしないと、Androidフォンにインストールしたときにパッケージapkファイルが白い画面で表示される場合があります。具体的な構成は次のとおりです。
module.exports = {
publicPath: "./",// 需要配置 否则打包后的apk文件安装在手机可能白屏
devServer: {
port: "6868", // 配置开发服务器的端口号（打包可以无需配置）
// 配置跨域代理(也可以使用CROS解决跨域)
proxy: {
"/ api": {
target: "http://192.168.1.1:4343", // 目标服务器地址
ws: true, // 是否代理websocket
changeOrigin: true, // 是否跨域
pathRewrite: {
"^/api": '' // url重写
}
}
},
}
3.Npmランビルドまたはヤーンランビルドパッケージ
パッケージ化が完了すると、プロジェクトのルートディレクトリに追加のdistディレクトリが作成されます。内容は次のとおりです。
上記の手順の後、vueプロジェクトがパッケージ化されました。次に、ツールhbuilderXを使用して、プロジェクトをandroid側としてパッケージ化する必要があります。 apkファイル
vueによってパッケージ化されたdistはどのようにしてandroidおよびiosアプリケーションになりますか
まず、公式WebサイトにアクセスしてhbuildXをダウンロードします。ダウンロードアドレスはhttps://www.dcloud.io/hbuilderx.htmlです。独自の環境を選択し、対応するバージョンをダウンロードします。ダウンロードが完了したら、解凍してHbuildXを開きます。
起動後のインターフェースは次のとおりです。
起動インターフェースの左下隅にログインボタンがあり、クリックしてログインします。アカウントをお持ちでない場合は、ログインするアカウントを登録したことを示します。ログインが完了すると、アカウント名が左下隅に表示されます。
次に、[新規]、[プロジェクト]の順に選択し、5 + Appプロジェクトを作成して、プロジェクト名とパスを自分で選択します。
作成されたプロジェクトディレクトリとディレクトリの説明は次のとおりです。以前にパッケージ化されたdistディレクトリの内容をコピーして貼り付け、[上書き]を選択するだけです。
上記の手順が完了すると、次のすべての作業の準備が整い、パッケージングのみが残ります。具体的なパッケージング手順は次のとおりです。
マニフェスト.jsonを開き、いくつかの重要なコアオプションを構成します。具体的な構成は次のとおりです。
生成
されたアイコンは、unpackageディレクトリの下のresディレクトリで選択され、公開されます= "Native App Cloud Packaging =>次に、androidパッケージを選択すると、ios証明書もあります。 iosとしてパッケージ化でき、androidは無料の公開証明書を使用できます。開発者はそれらを直接使用できます。具体的なオプションは次のとおりです。しばらくお待ちください。
しばらくすると、パッケージ化が成功すると、apkダウンロードファイルのダウンロードリンクに戻り、リンクをクリックしてapkファイルをダウンロードし、Androidフォンに送信してインストールします。
以上の手順を踏むと、自分たちで開発したアプリを携帯電話で体験できます。自分で開発したアプリを携帯電話にインストールしてご利用ください。