摘要：简介最近用框架写安卓版，本来打算用打包成文件即可，但发现配置起来复杂，还不如自己搭建环境，用工具提供的命令在终端实现，下面介绍遇到的问题及解决。
简介：最近用vue-cli框架写安卓版APP，本来打算用Hbuilder打包成.apk文件即可，但发现配置起来复杂，还不如自己搭建环境，用cordova工具提供的命令在终端实现，下面介绍遇到的问题及解决。
一、打包过程
首先要有node环境，然后用 npm install -g cordova，
终端或powershell里，执行 cordova create resume com.dls myresume
其中resume是项目目录，com.dls是包名，myresume是应用程序的显示标题
1.执行 npm run build 之后，复制vue项目中 dist 下面的文件，到创建好的 resume 项目的 www 文件下
复制 到
2.将终端切换到创建的resume项目目录：cd resume
执行 cordova platforms add android --save 这里的平台名称可以是其他，我打包的是apk，所以使用安卓平台。
3.执行 cordova platform ls 来检查当前设置状况
4.执行 cordova requirements 来检查打包条件JDK、SDK、Gradle
jdk必须安装1.8*版本的，另外注意环境变量配置正确，一定要新建系统变量，命名成特定名称，不能直接把安装路径写在系统变量Path后面，例如Java JDK，新建系统变量名为JAVA_HOME，变量值为JDK的安装路径，然后在系统变量Path中，将 %JAVA_HOME%bin; %JAVA_HOME%jrebin追加到变量值后面。详情见 https://segmentfault.com/a/11...
5.执行 cordova build android 开始打包，初次打包需要下载Gradle配置文件，有点慢。
打包完毕会出现打包后生成的.apk文件路径
把路径粘到窗口回车就可以看见打包好的.apk文件了
二、问题
在手机上打开后灰屏，cordova打包的是www文件夹下的内容，也就是说，内容应该都在www文件夹下面，而我们的源代码要放到src下面去，vue-cil的index.html是在根路径下面的，所以需要修改打包配置。
首先，打开vue-cli项目的config下的index.js，将build里assetsPublicPath的值由"/"改为"./"
然后，打开vue-cli项目的build下的util.js，将打包构建时提取css的公共路径往上加两层，详见图：
这样修改之后，在 npm run dev 浏览器环境下预览会有问题，但在手机上可以成功预览。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114837.html
摘要：简介最近用框架写安卓版，本来打算用打包成文件即可，但发现配置起来复杂，还不如自己搭建环境，用工具提供的命令在终端实现，下面介绍遇到的问题及解决。 简介：最近用vue-cli框架写安卓版APP，本来打算用Hbuilder打包成.apk文件即可，但发现配置起来复杂，还不如自己搭建环境，用cordova工具提供的命令在终端实现，下面介绍遇到的问题及解决。一、打包过程首先要有node环境，然后...
摘要：系列安装安装搭建工程注自定义命名工程加入注自定义命名注意事项修改目录下的执行时，会把打包内容指定到文件夹内，根据文件夹内容构建。添加平台在加平台前，需要修改的内容，包名的命名一般是，与申请微信时所用的包名对应。 vue-cordova vue2.0系列+Cordova 安装vue-cli npm install -g vue-cli 安装Cordova npm install -g c...
阅读 4058·2021-10-08 10:04
阅读 3032·2021-08-11 11:20
阅读 2701·2021-07-25 21:37
阅读 2664·2019-08-30 12:44
阅读 2287·2019-08-30 11:12
阅读 1291·2019-08-26 13:45
阅读 2314·2019-08-26 11:53
阅读 3037·2019-08-26 11:32
