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. 解决 配置springmvc拦截所有请求后请求静态资源404的问题

    <servlet-mapping> <servlet-name>spring-servlet</servlet-name> <url-pattern>/ ...

  2. 微信小程序之用户信息授权 wx.getUserInfo

    用户授权 <button open-type="getUserInfo" bindgetuserinfo='getUser'>授权用户信息</button> ...

  3. Sleeping会话导致阻塞原理（上）

    背景 我在处理客户问题的时候,客户经常搞不懂sleeping 的由来,和他可能导致的问题.下面来详细说下 什么是sleeping 其实我们经常可以在数据库中看到“”sleeping“状态的连接,但是这 ...

  4. Java+Netty、Vue+Element-UI实现的即时通信应用 leo-im

    之前工作接触了几个开源的IM产品,再加上曾经用Netty实现过几个服务,于是就有了用Netty实现一个IM的想法,于是用业余时间写了一个IM,和喜欢Netty的程序员们分享. 考虑到方便扩展,在服务端 ...

  5. strongSwan配置、运行及测试

    版本信息:strongSwan v5.7.2 1.      编译 tar xvf strongswan-5.7.2.tar.gz ./configure --prefix=/usr/ --sysco ...

  6. A1046. Shortest Distance(20)

    17/20,部分超时. #include<bits/stdc++.h> using namespace std; int N,x,pairs; int a,b; vector<int ...

  7. php插入中文数据到MySQL乱码

    事情是这样的:我在本地的测试成功了,放到服务器测试,发现服务器的数据库里的中文竟然乱码了. 我进行了以下几步基本的做法: PHP文件改为utf-8的格式. 加入header("Content ...

  8. ”数学口袋精灵“第二个Sprint计划---第二天

    “数学口袋精灵”第二个Sprint计划----第二天进度 任务分配: 冯美欣:欢迎界面的音效 吴舒婷:游戏界面的动作条,选择答案后的音效 林欢雯:完善算法代码的设计 进度:   冯美欣:找到了几个音乐 ...

  9. 基于 Java Web 的毕业设计选题管理平台--测试报告与用户手册

    一.测试报告 1.兼容性测试 功能 描述 效果 Chrome浏览器 FireFox浏览器 IE浏览器 war 端浏览器 管理员登录 管理员用户登录功能 弹出“登录成功”对话框,进入到毕业设计选题管理平 ...

  10. Winform设置托盘程序，托盘显示

    1.拖一个NotifyIcon,一个ContextMenuStrip控件到主窗体中 2.设置notifyIcon1,一个contextMenuStrip1(如下图) Icon为托盘图标,Text托盘显 ...