ホームページ  >  記事  >  ウェブフロントエンド  >  Cordova が Vue プロジェクトをパッケージ化する方法

Cordova が Vue プロジェクトをパッケージ化する方法

小云云
小云云オリジナル
2018-01-15 13:33:521845ブラウズ

この記事では主に、Cordova を使用して Vue プロジェクトをパッケージ化する方法を詳しく紹介します。興味がある方はぜひ参考にしてください。

現在、中国では Vue を使用してハイブリッド アプリを開発する開発者が増えていますが、全員が開発を完了した後、Vue プロジェクトをアプリにパッケージ化する方法がわからないことに気付きます。私の現在の理解によれば、Vue プロジェクトをパッケージ化する最も一般的な方法は、weex とcordova を使用することです。 Weex は Alibaba によって提供されており、Vue の作成者によって強く推奨されています。興味がある場合は、学習して使用してください。私は angular+ionic で作業しているので、cordova を好みます。次に、cordova を使用して Vue プロジェクトをパッケージ化する方法を説明します。次のコマンド:

npm install -g cordova
このコマンドが機能しない場合は、読み続けないことをお勧めします。

ステップ 2: 新しい Cordova プロジェクトを作成する


コマンドを実行します

cordova create cordovaApp com.cordova.testapp
cd cordovaApp
cordova platform add android
この時点で、Cordova プロジェクトが作成されます。

ステップ 3: vue プロジェクトを変更する


vue プロジェクトがない場合は、Baidu にアクセスして新しい vue プロジェクトを作成します。

まず、vue プロジェクトのindex.html を変更します

<meta http-equiv="Content-Security-Policy" content="default-src &#39;self&#39; data: gap: https://ssl.gstatic.com &#39;unsafe-eval&#39;; style-src &#39;self&#39; &#39;unsafe-inline&#39;; media-src *; img-src &#39;self&#39; data: content:;">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

をヘッドの間に追加します。これにより、ページのスタイルが変更される可能性があることに注意してください。それ以外の場合は、追加しないでください。を追加することをお勧めします。

次に、cordova.jsを導入します

<body>
  <p id="app"></p>
  <script type="text/javascript" src="cordova.js"></script>
  <!-- built files will be auto injected -->
</body>

次に、srcのmain.jsを次のコードに変更します

dd42d94925fdb9bfa5a5dbe5c987c627

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from &#39;vue&#39;
import App from &#39;./App&#39;
import router from &#39;./router&#39;
Vue.config.productionTip = false

/* eslint-disable no-new */

document.addEventListener(&#39;deviceready&#39;, function() {
  new Vue({
    el: &#39;#app&#39;,
    router,
    store,
    template: &#39;<App/>&#39;,
    components: { App }
  })
  window.navigator.splashscreen.hide()
}, false);

最後に、configフォルダー内のindex.jsファイルを変更します

ビルド内の

を変更します

    assetsSubDirectory: &#39;static&#39;,
    assetsPublicPath: &#39;/&#39;,


    assetsSubDirectory: &#39;&#39;,
    assetsPublicPath: &#39;&#39;,

を実行して、実行できるかどうかを確認します。指示が正常であれば、ここでは問題ありません。


ステップ4: vueファイルをcordovaプロジェクトに入れてパッケージ化します

まずvueプロジェクトで実行してください


npm run dev

実行が完了すると、distフォルダーが生成されますので、このフォルダーを見つけてください。すべてのファイルをその中に置き、ファイルを Cordova プロジェクトの www フォルダーにコピーし、元のファイルを置き換えます。


その後、

npm run build
を実行すると、実行可能なapkファイルが生成されるので、それをインストールするだけです。

これで、vue プロジェクトのパッケージ化が完了しました。


フレンドリーなリマインダー:


npm run dev または npm run build の実行中に vue プロジェクトで問題が発生した場合 (通常はコード エラーではありません)、node_modules フォルダーを削除し、npm install を使用してインストールできます。

eslint が原因でコード チェックが失敗した場合は、Vue プロジェクトのビルド フォルダーにある webpack.base.config ファイル内のルール


cordova build android

をコメント アウトできます。

関連する推奨事項:

#


vue プロジェクトのホームページの読み込み速度の最適化例の共有


vue プロジェクトの共通コンポーネントとフレームワーク構造につ​​いての共有

以上がCordova が Vue プロジェクトをパッケージ化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。