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. TMS320VC5509驱动LCD1602之奇怪问题和时序图

    1. 最近调试自己板子上LCD1602的时候,看下测试的时序图,因为下面的时序图导致LCD1602无法显示,下面的时序图是有问题的,E的上升沿和下降沿的时候,RW需要低电平 对比下淘宝上买的可以显示的 ...

  2. SQL 追踪

    SQL追踪(SQL Trace)是一个轻量级的追踪工具,按照事件(Events)记录数据库发生的消息,几乎对数据库性能没有什么影响.SQL Server内置一个Trace,称作默认追踪(Default ...

  3. nvm管理不同版本的node和npm

    写在前面 nvm(nodejs version manager)是nodejs的管理工具,如果你需要快速更新node版本,并且不覆盖之前的版本:或者想要在不同的node版本之间进行切换:使用nvm来安 ...

  4. 大话Java中的哈希(hash)结构（一）

    o(￣▽￣)d 小伙伴们在上网或者搞程序设计的时候,总是会听到关于“哈希(hash)”的一些东西.比如哈希算法.哈希表等等的名词,那么什么是hash呢? 一.相关概念 1.hash算法:一类特殊的算法 ...

  5. 学习git 新手。这个写的不错

    转自:https://www.cnblogs.com/wupeiqi/p/7295372.html 版本控制 说到版本控制,脑海里总会浮现大学毕业是写毕业论文的场景,你电脑上的毕业论文一定出现过这番景 ...

  6. leetcode刷题笔记258 各位相加

    题目描述: 给一个非负整数 num,反复添加所有的数字,直到结果只有一个数字. 例如: 设定 num = 38,过程就像: 3 + 8 = 11, 1 + 1 = 2. 由于 2 只有1个数字,所以返 ...

  7. yocto-sumo源码解析（二）: oe-buildenv-internal

    1 首先,脚本先对运行方式进行了检测: if ! $(return >/dev/null 2>&1) ; then echo 'oe-buildenv-internal: erro ...

  8. symfon2 配置文件使用 + HttpRequest使用 + Global多语言解决方案

    1. 在 app/conig中建立一个自命名的文件: abc.yml 2. 在 app/config/config.yml中导入abc.yml 文件头部: imports:- { resource: ...

  9. Centos6.5下进行PHP版本升级

    http://blog.csdn.net/aliveqf/article/details/70444387

  10. JavaScript高级程序设计学习笔记2

    垃圾收集原理: 找出不再使用的变量,然后释放其内存. js中最常用的垃圾收集方法是标记清除,当变量进入环境时,就将变量标记为“进入环境”,当变量离开环境时,将其标记为“离开环境”,最后由垃圾收集器完成 ...