一、新建vue項目

?1.打開cmd命令，輸入：npm i -g npm

???這個命令類似用npm自身來install自己，即升級npm

2.再輸入:npm install -g vue-cli

?這個命令是用npm全局安裝vue-cli。

vue-cli 是vue.js的腳手架，用于自動生成vue.js+webpack的項目模板，分為vue init webpack-simple 項目名 和vue init webpack 項目名 兩種。

當然首先你的安裝vue，webpack，node等一些必要的環境。

3.再輸入：vue init?webpack vue-app

初始化新建項目，這里vue-app是項目名，按照它的提示，一步步輸入項目相關信息。

項目初始化完成后

按照它的提示

首先：cd vue-app? (進入項目文件夾)

然后：npm run dev（運行項目）

運行結束：

此時打開瀏覽器，輸入：localhost:8080 ,看到下面界面則成功啟動

此時要想結束運行，在命令行中按ctrl+c ，再輸入Y確認，即可關閉。

4.打包項目

輸入：npm run build

也可以使用：npm run build --report

后者會提示一個網址

打開這個網址：

5.打包之后

打包之后的文件會放在項目根路徑下得到dist里面

二.新建cordova項目

打包好的vue H5項目需要使用cordova來打包成Android項目，支持跨域。

1.新建cordova項目

先：npm install -g cordova

全局安裝cordova

再：cordova create cordova-app com.ysh mapp

創建一個cordova項目，名稱是mapp,包名是com.ysh,項目名是cordova-app

?2.復制和替換

將上面的vue項目中的dist目錄下的文件全部拷貝到cordova項目得到www目錄下

3.進入cordova項目

輸入：cd cordova-app

4.打包android

輸入：cordova platforms add android --save

這一步完成后，在項目platforms文件夾下會發現多了Android文件夾

三、打包apk

1.打開webstorm,選擇打開，找到cordova項目的路徑，選擇打開

2.點擊webstorm下的Terminal，輸入：cordova build android --release

打包完成后會提示apk的輸出目錄：

找到此目錄：

這是在調試環境下的apk，如果是正式環境，還得需要生成簽名、添加簽名等。

總結

以上是生活随笔為你收集整理的Webstorm+cordova打包vue成Android项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。