vueAppパッケージ

ローカルのパッケージのテスト

  1. HTTPサーバは、単純なゼロコンフィギュレーションコマンドのNode.jsベースのhttpサーバラインです。
    インストール:NPM -g HTTPサーバをインストール
    使用します。httpサーバー[パス] [オプション]
  2. NPMの実行DEV(またはNPM開始)。
    プロジェクトがアクセスできるように、ローカルホストとIPで(localhostのプロジェクトがアクセスできる場合、IPはいないアクセスし、設定を変更するために行くことができます/ホスト内のindex.js:ホストとして「localhost」の「0.0.0.0」)。
  3. NPMの実行ビルドは、distのディレクトリを生成します。
    または変更を加えることなくパッケージ構成(以下の項目が設定をパッケージ化されていない)のhttp-serverが前にアクセスされたdistの影響を与えません。
  4. distの中にアドレスアクセス項目によって生成された10 -c入力のhttpサーバ、。
    ポート番号をメモするには、プロジェクトで使用するポート番号です。


     
    写真.PNG

hbuilderを使用してパッケージングテスト

  1. 新しいモバイルアプリでhbuilderでのプロジェクト、および空のテンプレートを選択し、プロジェクト名、可能な選択構文ES5 / ES6を記入。

  2. manifest.jsonをファイル内のプロジェクトは、すべての残りの部分を削除したまま、その後、distの内部全体のことをにコピーします。


     
    写真.PNG
  3. まず、index.htmlをブラウザにアップし、(サーバが実行でき、検証プロジェクトベースhbuilder自体を)実行することができるようにします。
    設定は、プロジェクトへのアクセスが成功されていないパッケージ化されていない、パスリソースの問題に導入されています。

  4. ビルド構成の場合は
    1)のconfig / index.jsには、以下のassetsPublicPathを見つけるために、ルートディレクトリ内の構築: '/'、assetsPublicPathにそれを置く: './'(またはassetsPublicPath: '')。


     
    写真.PNG

    設定が完了すると、ブラウザでhbuilderでジャンプするまで実行することができます。しかし、いくつかの静止画がリソースにアクセスすることはできませんがあるかもしれません(写真は、この問題を持っていないでしょうbase64でリソースに変換されている場合)

2)資源の問題にアクセスすることはできません静止画を解決するために。
注意:Webプロジェクト、静的リソース(画像、オーディオ/ビデオ)を書いたり、より良い静的なディレクトリに格納されています。

解決策1:静的リソースパス(私は推測するこの方法、私は正常にテスト)を変更し
、ルートディレクトリの位置に関するコードの47-55行を追加/build/utils.js、publicPathを:「../../」。図:

    if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' // 这句就是加的代码,不要找错位置 }) } else { return ['vue-style-loader'].concat(loaders) } 

対処方法2:base64での
ルートディレクトリ/build/webpack.base.conf.jsファイルは、できるだけ多くの時に大きな変化を梱包、パッケージBASE64の制御範囲を変更します。

 
写真.PNG

 


hbuilderパッケージ

  1. manifest.jsonを設定
    1)設定、アプリケーション名、アプリケーションの説明、アプリケーションのバージョン、appIDが(appIDが、ログイン後に自動的に)チューブなしで、得られます。


     
    写真.PNG

2)構成アプリケーションのロゴは、自動的にアイコンを生成し、それを交換してください。
3)起動時の画像を設定し、異なるサイズが異なる画像を必要とするので、あなたはこれを設定しない場合は、計画のUIを作り、それがデフォルトの開始hbuilder写真です。
4)SDK、許可モジュール、参照関係、コードビュー、...、無管。

  1. 发起云打包,没有ios证书,只能使用android的公用证书
    发行 > 原生app云打包:包名一般是倒着写域名,打包


     
    图片.png
  2. 打包完成后,点击下载链接就可以下载webapp。

安装在手机后的一些问题

  1. iconfont没有显示
    这是因为,web是http协议,而手机不是http协议。在使用到iconfont的地方,url加上http协议:


     
    图片.png
  2. 为了缩小app的大小,dist/static/js里面的以 .map 结尾的文件都可以删除。

作者:chan_it
链接:https://www.jianshu.com/p/e327eca486db
来源:简书

おすすめ

転載: www.cnblogs.com/dinggf/p/11718955.html