Cordova が Vue プロジェクトをパッケージ化する方法-jsチュートリアル-php.cn

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

小云云

リリース： 2018-01-15 13:33:52

オリジナル

1914 人が閲覧しました

この記事では主に、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を次のコードに変更します

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

// 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

ログイン後にコピー

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