前言:

如题,需要下载HbuilderX,没有需要自行下载

下载办法也很简单,进入HBuilderX官网,然后下载APP开发版

IDEA Android项目打包_IDEA


下载好后解压到指定目录,然后点击这个即可进入

IDEA Android项目打包_vue.js_02

具体步骤:

  1. 新建一个Vue项目
  2. IDEA Android项目打包_IDEA_03

  3. 修改vue.config.js配置文件,即添加横线这一行
  4. IDEA Android项目打包_app_04

  5. 这个语句的意思是修改为相对路径
    如果不加,就可能导致打包后的vue项目页面显示空白
  6. 在终端进行执行npm run build指令将项目进行打包
  7. IDEA Android项目打包_IDEA_05

  8. 打包完成后会出现dist文件夹
  9. IDEA Android项目打包_HBuilderX_06

  10. 在浏览器打开index.html
  11. IDEA Android项目打包_IDEA Android项目打包_07

  12. 显示如下即算成功
  13. IDEA Android项目打包_app_08

  14. 打开HBuilderX新建一个5+APP项目,并把vue中dist里面的所有文件复制过来(选择复制并替换)
  15. IDEA Android项目打包_IDEA Android项目打包_09

  16. 若提示要注册,那就自行注册一个账号
  17. 配置APP属性,双击manifest.json
    下图是我已经注册过的账号,会自动生成AppID,若新建时没有生成,就点击重新获取,然后根据提示注册一个账号
  18. IDEA Android项目打包_vue.js_10

  19. 点击模块配置,把这些打勾的都取消,或者不取消将账号进行实名认证也可以
  20. IDEA Android项目打包_IDEA Android项目打包_11


  21. IDEA Android项目打包_IDEA Android项目打包_12

  22. 其他的配置例如图标配置,可自行根据需求配置
  23. 配置好后发行——原生APP-云打包——勾选如下选项,然后点击打包
  24. IDEA Android项目打包_app_13

  25. 若提示安装插件,等待安装完成,然后再打包
  26. 等待系统打包完成后,打开所在目录
  27. IDEA Android项目打包_vue.js_14

  28. 可以发现如下文件即打包好的apk文件
  29. IDEA Android项目打包_IDEA_15

  30. 到我的电脑里找到该文件
  31. IDEA Android项目打包_vue.js_16

  32. 将这个文件上传到手机中,我用的是qq上传到我的手机里
    在手机上下载该文件并安装,显示如下界面即成功
  33. IDEA Android项目打包_vue.js_17


  34. IDEA Android项目打包_IDEA_18