1. 程式人生 > >用Cordova將vue專案打包成app

用Cordova將vue專案打包成app

1.配置安卓環境

(1)下載JDK和JRE,安裝(通常JDK會整合JRE,所以只需安裝JDK就好)JDK一定要是 8 版本(JDK1.8),Down了個10版本的差點配到吐也沒成功,這是個驚天神坑

(2)下載Android  SDK,雙擊安裝,複製下安裝目錄

(3)配飾環境變數:系統 => 高階系統設定 => 環境變數 =>系統變數 => 新建

新建一個ANDROID_HOME,值是sdk安裝路徑

新建一個JAVA_HOME,值是JDK安裝路徑

新建一個CLASSPATH,值是   .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;   (最前面有個點)

找到PATH,點選編輯,新增SDK目錄下的platform_tools和tools路徑,再新增一個JDK下的bin路徑

2.構建VUE專案

使用vue-cli正常構建,擼程式碼

3.使用Cordova搭建打包環境

 npm install -g cordova --registry=https://registry.npm.taobao.org    (安裝cordova,這裡不要用npm或者cnpm  install  cordova  -g,會出錯)

cordova creat cordovaApp com.cordova.testapp               (建立cordova專案,cordova create 專案名  com.公司名.專案名  類名)

cd cordovaApp

cordova platform add android         (新增安卓平臺,注:很多外掛例如攝像頭外掛之類的要在安卓6.3.0之後才好使,儘量安裝android7.0平臺)

4.修改vue專案

(1)在index.html的head中加入

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

    <div id="app"></div>

     <script type="text/javascript" src="cordova.js"></script>

    <script>

        document.addEventListener('deviceready', function() {   }, false);

    </script>

</body>

最後修改config資料夾下的index.js

修改build中的

assetsSubDirectory: 'Static',

assetsPublicPath: '/',

assetsSubDirectory: ' ',

assetsPublicPath: ' ',

或者改成

assetsSubDirectory: ' ',

assetsPublicPath: ' ./',

然後執行

npm run dev

註釋掉main.js的document.addEventListener('deviceready', function() { }),因為這個在瀏覽器裡不識別,在APP裡才可以此時如果能正常跑起來,那就沒問題了。(會報一個缺少左尖角的錯,不用管)

5.將VUE專案打包

npm run biuld

將生成的dist資料夾下的檔案全部複製,替換掉剛剛新建的cordova專案裡面的www資料夾內的東西,然後在終端進入cordova專案資料夾,執行打包命令

cordova  build  android

會生成一個apk檔案,然後放到手機裡,安裝即可

6.注意事項

(1)配置安卓環境非常麻煩,而且全他媽是坑,謹慎,心態放平,版本壓低

(2)首次打包時間會非常長,我花了25分鐘,因為npm要去下載gradle,不太大,但是不科學上網的話會奧比慢

(4)JDK為版本最好為 8(即1.8.0),然後等cordova build android時,報了哪個SDK的版本,就去Android  Studio裡下載對應的SDK Platform。

例如我的報的是22:

那麼開啟Android Studio,右下角的configure => SDK Manager

勾選右下角Show Package Details => 找到你去要的SDK Platform版本,勾選 => OK

再回到終端裡,cordova  build  android,就可以了

不要覺得年紀輕輕就到了低谷,人生還有很大的下降空間。