ホームページ > 記事 > ウェブフロントエンド > Cordova が Vue プロジェクトをパッケージ化する方法
この記事では主に、Cordova を使用して Vue プロジェクトをパッケージ化する方法を詳しく紹介します。興味がある方はぜひ参考にしてください。
現在、中国では Vue を使用してハイブリッド アプリを開発する開発者が増えていますが、全員が開発を完了した後、Vue プロジェクトをアプリにパッケージ化する方法がわからないことに気付きます。私の現在の理解によれば、Vue プロジェクトをパッケージ化する最も一般的な方法は、weex とcordova を使用することです。 Weex は Alibaba によって提供されており、Vue の作成者によって強く推奨されています。興味がある場合は、学習して使用してください。私は angular+ionic で作業しているので、cordova を好みます。次に、cordova を使用して Vue プロジェクトをパッケージ化する方法を説明します。次のコマンド:
npm install -g cordova
このコマンドが機能しない場合は、読み続けないことをお勧めします。
cordova create cordovaApp com.cordova.testapp
cd cordovaApp
cordova platform add android
この時点で、Cordova プロジェクトが作成されます。
<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:;"> <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>
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 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ document.addEventListener('deviceready', function() { new Vue({ el: '#app', router, store, template: '<App/>', components: { App } }) window.navigator.splashscreen.hide() }, false);
最後に、configフォルダー内のindex.jsファイルを変更します
ビルド内の
を変更します
assetsSubDirectory: 'static', assetsPublicPath: '/',
は
assetsSubDirectory: '', assetsPublicPath: '',
を実行して、実行できるかどうかを確認します。指示が正常であれば、ここでは問題ありません。
ステップ4: vueファイルをcordovaプロジェクトに入れてパッケージ化します
npm run dev実行が完了すると、distフォルダーが生成されますので、このフォルダーを見つけてください。すべてのファイルをその中に置き、ファイルを Cordova プロジェクトの www フォルダーにコピーし、元のファイルを置き換えます。
npm run build
を実行すると、実行可能なapkファイルが生成されるので、それをインストールするだけです。
eslint が原因でコード チェックが失敗した場合は、Vue プロジェクトのビルド フォルダーにある webpack.base.config ファイル内のルール
cordova build androidをコメント アウトできます。 関連する推奨事項:
#
vue プロジェクトのホームページの読み込み速度の最適化例の共有
以上がCordova が Vue プロジェクトをパッケージ化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。