1、执行npm run build之后生成dist文件夹

2、打开HBuilderX新建一个APP项目

3、把dist文件夹里的所有文件拷贝替换到APP文件夹下

4、打开manifest.json文件配置相关内容（自行百度，配置APP图标等选项）

5、点击软件顶上的发行--原生APP-云打包进行打包

6、打包后下载安装即可

-----------------------------------------------------------------------------------------------------------------------------------------

重点说一下坑点：两个问题都是路径问题，相对绝对路径就不解释了，只说一种解决办法（新手视角，不足之处请大神指教）

1、安装后看到的是一片空白

这个是路径问题，修改index.html文件里的路径即可,把引入路径都改成 ./xxx/xx/xxxx

2、本地的静态资源不显示

也是路径问题，打开项目列表可以看到

打开app.b73e1550.js文件搜索图片，可以看到

修改路径即可

「Vue」vue cli3项目打包为APP方法及坑点的更多相关文章

  1. 「Vue」vue cli3中axios的基本用法

    1.安装axiosnpm i axios -S2.main.js中设置import axios from 'axios'Vue.prototype.$axios = axiosPS:这里有个小坑,ax ...

  2. Electron+Vue – 基础学习(2): 项目打包成exe桌面应用

    项目创建完成,启动正常,接下来就是项目打包了.将测试Demo打包成exe桌面应用,点击exe文件,运行项目. 书接上文,创建项目有三种方式 Git拷贝.直接创建:通过electron社群提供的命令行工 ...

  3. 「Vue」Vue cli3中引用mui-ui问题及解决办法

    1.引用mui.js无效,top-bar划动,numbox点击无效等问题 解决办法: -main.js中import mui from './lib/mui/js/mui.js' Vue.protot ...

  4. 「Vue」vue生命周期

    Vue的生命周期 beforeCreate---created---beforeMount---mounted---(beforeupdate---updated :数据有更新时才会执行)---bef ...

  5. Jenkins实现单一安卓项目打包多个module填坑实录

    今天接手一个任务,已有项目结构上新添加了一个module,这个module打包工作需要在Jenkins上添加一个方便测试点击的打包工程 因为之前已有现成的打包工程,我直接新建了一个工程并且复制原有工程 ...

  6. vux构建的项目打包成app出的一些问题

    1.static里面能放一些外部的插件,css可以放static,引用的时候按照相对路径写, less不可以,因为放在static里面的文件不会经过webpack的处理,所以也就不会编译成css,所以 ...

  7. vue-cli创建的项目打包成app引入字体图标的问题

    将项目在手机端调试时,发现引入的阿里图标显示不出来,需要在引入的iconfont.css文件夹里给url加上https

  8. vuejs项目打包成APP后，首页不显示

  9. vue+webpack项目打包后背景图片加载不出来问题解决

    在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...

随机推荐

  1. [Deep-Learning-with-Python]基于Keras的房价预测

    预测房价:回归问题 回归问题预测结果为连续值,而不是离散的类别. 波士顿房价数据集 通过20世纪70年代波士顿郊区房价数据集,预测平均房价:数据集的特征包括犯罪率.税率等信息.数据集只有506条记录, ...

  2. Maven学习第1期---Maven简单介绍

    前言 Hadoop的MapReduce环境是一个复杂的编程环境,所以我们要尽可能地简化构建MapReduce项目的过程.Maven是一个很不错的自动化项目构建工具,通过Maven来帮助我们从复杂的环境 ...

  3. Selenium-Css Selector使用方法

    什么是Css Selector? Css Selector定位实际就是HTML的Css选择器的标签定位 工具 Css Selector的练习建议大家安装火狐浏览器后,下载插件,FireFinder 或 ...

  4. libgdx判断矩形重叠碰撞

    有两种方式. 1. 排除法,排除四种不可能重叠的情况就是了. public static boolean IsOverlap( Rectangle rect1, Rectangle rect2 ){ ...

  5. centos7 部署 nginx+tomcat+MariaDB 环境并安装安全狗，使用natapp隧道

    jdk安装: -openjdk 参考:https://blog.csdn.net/dhr201499/article/details/81626466 tomcat安装: 使用版本:8.5.37 参考 ...

  6. 小程序swiper组件高度自适应【转载】

    最近在做小程序开发,复制官方文档上的swiper组件实测后发现,图片不能自适应.网上找了几个版本测试都发现存在一些小问题,目前这个版本本人实测是最好用的.记录一下,方便日后使用. 感谢原创大神的帮助, ...

  7. [翻译]：Artificial Intelligence for games 5.3 STATE MACHINES：状态机

    目录 Chapter 5 Decision Making 5.3 STATE MACHINES:状态机 Chapter 5 Decision Making 5.3 STATE MACHINES:状态机 ...

  8. 网易云易盾朱星星：最容易被驳回的10大APP过检项

    本文由  网易云发布. 1月20日,“走进网易:移动测试与安全实践”公开活动在杭州西湖区颐高创业大厦4F楼友会创业咖啡厅举行.本次活动的议题聚焦在如何实现应用的高效开发.安全过检.开发功耗降到最低等热 ...

  9. shell 的 export命令

    export 功能说明:设置或显示环境变量.语 法:export [-fnp][变量名称]=[变量设置值]补充说明:在shell中执行程序时,shell会提供一组环境变量.export可新增,修改或删 ...

  10. Final互评------《I do》---- 二次元梦之队

    一.基于NABCD评论作品,及改进建议 1.根据(不限于)NABCD评论作品的选题; N(Need,需求):该产品是一款休闲类的解密游戏,背景是编程知识.作为一款休闲游戏,有着基本的娱乐功能,可以给用 ...