cordova混合App開發：Cordova+Vue實現Android APP開發 (vue項目配置,打包到cordova) (三)

查看上一步 cordova混合App開發：Cordova+Vue實現Android APP開發 (安裝cordova框架生成app) (二)

 

1、在cordova根目錄下(www同級目錄)，使用vue-cli 創建項目  vue-cli不做過多介紹

vue create vue_app

最終目錄結構如下

 

2、修改vue的打包配置，將包打包cordova項目中

vue_app目錄下新建 vue.config.js   寫入下面內容 具體vue.config.js配置 查看官網  https://cli.vuejs.org/zh/config/#indexpath

const path = require('path');
// vue.config.js
module.exports = {
    publicPath: '',
    // 當運行 vue-cli-service build 時生成的生產環境構建文件的目錄 Default: 'dist'
    // Node.js 中， __dirname 總是指向被執行js 文件的絕對路徑
    outputDir: path.resolve(__dirname, '../www'),
    // 指定生成的 index.html 的輸出路徑 (相對於 outputDir)。也可以是一個絕對路徑。Default: 'index.html'
    indexPath: 'index.html',
    // 放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄 Default: ''
    assetsDir: ''
}

 

3、然后build打包一下 vue_app目錄下執行

npm run build

　　vue-cli-service 打包文件到了cordova-vue項目下的 www 文件夾下了

4、返回到cordova-vue項目 下重新構建app

cd ../
cordova build android

 

 

 

然后使用模擬器重新打開上圖目錄中的apk  可以頁面有了

 

 

 

 

5、使用Android studio 打包APK

cordova有打包的命令，但是打包速度真的很慢，我們一般把生成的原生代碼用esclipse或者android studio打包。IOS需要在mac環境下用xcode打包。我們先用android。

 

(1) 導入項目

　　打開Android studio   點擊File => Open => 找到 cordova-vue 項目下 platforms/android/build.gradle 點擊確定

 

 

等待IDE自動構建。。。

需要等待一段時間。。。

然后，此時項目目錄

 

執行命令

cordova prepare android

這個命令會把Cordova根目錄下www目錄中內容拷貝到下圖的路徑 即Android的assets中
每次vue重新打包后 把vue打包好的文件拷貝到 Cordova根目錄的www 然后執行改命令 

 

 

 

 (2) 使用android studio打包apk    build apk是普通打包 用於測試      build bundle是簽名打包, 用於發布  這里點擊第一個

　　

 

打包成功后右下角會提示 build結果 點擊locate 可以打開apk文件目錄   使用模擬器打開apk文件 可以看到一樣的展示效果