VUE+Ionic，項目搭建&打包成APK

安裝Vue&建立Vue工程

1.安裝Vue CLI：

npm install -g vue-cli

2.建立新的Vue項目，建立最後一步會提醒是否使用npm install 自動安裝，若是選擇N，在第2步後，手動執行：npm install

vue init webpack my-project 或 vue create my-project
或
vue init webpack-simple my-project  (目錄簡單） 

#若想安裝快速，在最後一步提示是否使用npm install命令時，選擇no，cd到項目目錄，自行安裝，可以使用cnpm命令，速度會更快
cnpm install

3.運行，若想改變端口，修改index.js

cd my-project npm run dev

 

在Vue工程中安裝Ionic依賴

安裝ionic相關依賴（其中@ionic/core是組件部分，@ionic/vue是封裝成Vue方式調用的接口部分）：

npm i @ionic/core @ionic/vue

安裝完成後，在main.js中添加配置：

import Ionic from '@ionic/vue'; import '@ionic/core/css/ionic.bundle.css'; Vue.use(Ionic);

 服務啓動中遇到的問題：

warning  in ./node_modules/@ionic/vue/dist/ionic-vue.esm.js
"export 'ICON_PATHS' was not found in 'ionicons/icons'

解決辦法：在工程目錄下執行如下語句：

npm i ionicons@4.5.9-1 -D

 

打包APK

安裝cordova：

npm install -g cordova

cordova -v //驗證

 

必備

• JDK
• Gradel
• Android Studio：http://www.android-studio.org/

 安裝要點

1.安裝Android Studio後：修改文件

2.Android SDK licence須要處理，否則項目中作打包時會報錯，SDK目錄下，tools/bin文件夾，有一個sdkmanager.bat文件，一直贊成便可

sdkmanager --licenses

 

建立Cordova項目

1 cordova create cordovavueapp 2 cordova platform add android 3 cordova platform add ios

建立vue項目

能夠在cordova項目目錄下建立，爲了後續的編譯拷貝方便

引入ionice@core

index.html頁面添加：

<link href="https://unpkg.com/@ionic/core@4.0.0-beta.13/css/ionic.bundle.css" rel="stylesheet">
<script src="https://unpkg.com/@ionic/core@4.0.0-beta.13/dist/ionic.js"></script>

在main.js加入

Vue.config.ignoredElements = [/^ion-/];

修改vue的config/index.js，修改bulid打包輸出位置和index啓動頁面，位置改到cordva項目的www目錄下，dev不變，當dev開發時，仍是vue工程，當執行build命令時，會將打包項輸出到www文件夾

 在vue項目中執行build命令

npm run build

 此時發佈報錯：cannot fid moudele ‘chalk’，這是缺失包，解決辦法：嘗試npm install 安裝

 

 調試打包apk軟件

cd到cordova目錄

cordova run android

 

 打包成apk：打包後目錄在：platform/android/app/build/outputs/apk/debug目錄

cordova build android