Webstorm+cordova打包vue成Android项目

时间:2024-03-14 22:30:11

一、新建vue项目

 1.打开cmd命令,输入:npm i -g npm

   这个命令类似用npm自身来install自己,即升级npm

Webstorm+cordova打包vue成Android项目

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等一些必要的环境。

Webstorm+cordova打包vue成Android项目Webstorm+cordova打包vue成Android项目

3.再输入:vue init webpack vue-app

初始化新建项目,这里vue-app是项目名,按照它的提示,一步步输入项目相关信息。

Webstorm+cordova打包vue成Android项目Webstorm+cordova打包vue成Android项目

项目初始化完成后

Webstorm+cordova打包vue成Android项目Webstorm+cordova打包vue成Android项目

按照它的提示

首先:cd vue-app  (进入项目文件夹)

然后:npm run dev(运行项目)

Webstorm+cordova打包vue成Android项目Webstorm+cordova打包vue成Android项目

运行结束:

此时打开浏览器,输入:localhost:8080 ,看到下面界面则成功启动

Webstorm+cordova打包vue成Android项目Webstorm+cordova打包vue成Android项目

此时要想结束运行,在命令行中按ctrl+c ,再输入Y确认,即可关闭。

4.打包项目

输入:npm run build

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

后者会提示一个网址

Webstorm+cordova打包vue成Android项目Webstorm+cordova打包vue成Android项目

打开这个网址:

Webstorm+cordova打包vue成Android项目Webstorm+cordova打包vue成Android项目

5.打包之后

打包之后的文件会放在项目根路径下得到dist里面

Webstorm+cordova打包vue成Android项目Webstorm+cordova打包vue成Android项目

二.新建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

Webstorm+cordova打包vue成Android项目Webstorm+cordova打包vue成Android项目

 2.复制和替换

将上面的vue项目中的dist目录下的文件全部拷贝到cordova项目得到www目录下

Webstorm+cordova打包vue成Android项目

Webstorm+cordova打包vue成Android项目

3.进入cordova项目

输入:cd cordova-app

4.打包android

输入:cordova platforms add android --save

Webstorm+cordova打包vue成Android项目

这一步完成后,在项目platforms文件夹下会发现多了Android文件夹

Webstorm+cordova打包vue成Android项目Webstorm+cordova打包vue成Android项目

三、打包apk

1.打开webstorm,选择打开,找到cordova项目的路径,选择打开

Webstorm+cordova打包vue成Android项目Webstorm+cordova打包vue成Android项目

2.点击webstorm下的Terminal,输入:cordova build android --release

Webstorm+cordova打包vue成Android项目Webstorm+cordova打包vue成Android项目

打包完成后会提示apk的输出目录:

Webstorm+cordova打包vue成Android项目Webstorm+cordova打包vue成Android项目

找到此目录:

Webstorm+cordova打包vue成Android项目Webstorm+cordova打包vue成Android项目

这是在调试环境下的apk,如果是正式环境,还得需要生成签名、添加签名等。