Webstorm+cordova打包vue成Android项目

一、新建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项目的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。