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. UCOSII笔记---信号量、邮箱、消息队列、信号量集、软件定时器

    一.接收邮箱函数的参数:timeout表示的是滴答定时器的节拍数,比如设定5ms为一个节拍,超时为100ms,则timeout=20. void *OSMboxPend (OS_EVENT *peve ...

  2. LOJ#6503.「雅礼集训 2018 Day4」Magic[容斥+NTT+启发式合并]

    题意 \(n\) 张卡牌 \(m\) 种颜色,询问有多少种本质不同的序列满足相邻颜色相同的位置数量等于 \(k\). 分析 首先本质不同不好直接处理,可以将同种颜色的卡牌看作是不相同的,求出答案后除以 ...

  3. （2）学习笔记 ） ASP.NET CORE微服务 Micro-Service ---- .NetCore启动配置 和 .NetCoreWebApi

    什么是.Net Core?.Net Core是微软开发的另外一个可以跨Linux.Windows.mac等平台的.Net.Net Core相关知识看文章地步dotnet dllname.dll 运行P ...

  4. centos 7部署ELK

    一.ELK介绍 Elasticsearch 是基于 JSON 的分布式搜索和分析引擎,专为实现水平扩展.高可用和管理便捷性而设计.Logstash 是动态数据收集管道,拥有可扩展的插件生态系统,能够与 ...

  5. 转--看完让你彻底搞懂Websocket原理

    偶然在知乎上看到一篇回帖,瞬间觉得之前看的那么多资料都不及这一篇回帖让我对 websocket 的认识深刻有木有.所以转到我博客里,分享一下.比较喜欢看这种博客,读起来很轻松,不枯燥,没有布道师的阵仗 ...

  6. 镜像仓库管理：与Portus不得不说的那些事

    背景: 目前在做一个云计算相关的项目,其中有这样一个需求:每个平台用户都有自己的docker镜像仓库(docker registry),用户可以对自己的镜像仓库的push/pull权限进行管理,也就是 ...

  7. spring boot 2.0 源码分析（二）

    在上一章学习了spring boot 2.0启动的大概流程以后,今天我们来深挖一下SpringApplication实例变量的run函数. 先把这段run函数的代码贴出来: /** * Run the ...

  8. 微软职位内部推荐-Software Engineer II-Search

    微软近期Open的职位: Do you want to work on a fast-cycle, high visibility, hardcore search team with ambitio ...

  9. 了不起的Node.js--之三

    开发工具: 我使用的开发工具是Mac版的WebStorm,这个工具支持Nodejs,只要按照如下步骤设置即可以支持 1.WebStorm的开发界面,这个开发工具还是非常好用的. 2.WebStorm的 ...

  10. [沈航软工教学] 学生项目Coding地址汇总

    同学们把自己的coding主页链接贴在评论里,要求格式"班号+学号+coding主页链接",如: "1301+13061193 + https://coding.net/ ...