1.在打包之前需要修改一个地方，那就是config->index.js文件，修改assetsPublicPath: '/'为assetsPublicPath: './',截图如下

上面文件改好后，开始打包，执行如下命令：

npm run build

生成 dist 文件夹

2.打包步骤

步骤一：

将 dist 文件 放入 HBuilder 编辑器中，将项目 转换成 App ，生成 manifest.json

步骤二：

配置 manifest.json , 点击 "发行" 按钮 -- 发行为原生安装包(P)

步骤三：

安装 -- 测试 -- 上线

HBuilder 打包 vue-cli 构建的 APP的更多相关文章

  1. 利用HBuilder打包Vue开发的webapp为app

    众所周知,前端开发完成的webapp只能运行在浏览器上,对运行环境有一定的限制,也就是除了浏览器其他的环境下不支持:那么现在如果有个需求是这样的呢?需要一套代码三端运行呢?三端运行(黑人脸??)是的, ...

  2. 使用hbuilder打包vue项目容易出现的坑点

    1.打包后手机打开"该app专为旧版本安卓"问题解决(在hbuilder中设置) 打开manifest.json 然后 2.打包后app打开显示白屏. 路径问题:在webpack中 ...

  3. HBuilder打包vue项目app后空白，并请求不到数据

    (解决空白问题)在打包之前一定要修改 config 目录下的 index.js 文件中的 bulid 模块打包配置项,否则会出现空白,如图   修改前 assetsPublicPath= '/',. ...

  4. vue cli 构建的 webpack 项目设置多页面

    1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...

  5. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  6. vue+cordova 构建hybrid app

    配了一个 vue + cordova + ionicCli 的 项目 支持 ionic 的脚手架命令 支持 cordova 的 插件 安装使用 支持 webpack 的自动构建 vue 安装了 vue ...

  7. vue脚手架 构建豆瓣App 第一天

    课堂笔记: 项目结构分析: 项目入口:index.html(div#app) 全局vue组件:App.vue(template:div#app) 通过相同id的div,index.html与Appvu ...

  8. @vue/cli 构建得项目eslint配置

    如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...

  9. 使用Vue CLI构建Vue项目

    第一步:首先在控制台输入vue --version,如果出现版本号则进入第三步:否则进入第二步: 第二步:输入npm install cnpm -g --registry=https://regist ...

  10. @vue/cli 构建得项目eslint配置2

    使用ESLint+Prettier来统一前端代码风格 加分号还是不加分号?tab还是空格?你还在为代码风格与同事争论得面红耳赤吗? 正文之前,先看个段子放松一下: 去死吧!你这个异教徒! 想起自己刚入 ...

随机推荐

  1. curator管理es索引

    安装curator------------------rpm --import https://packages.elastic.co/GPG-KEY-elasticsearch vi /etc/yu ...

  2. 【Java NIO】一文了解NIO

    Java NIO 1 背景介绍 在上一篇文章中我们介绍了Java基本IO,也就是阻塞式IO(BIO),在JDK1.4版本后推出了新的IO系统(NIO),也可以理解为非阻塞IO(Non-Blocking ...

  3. ANY和SOME 运算符

    在SQL中ANY和SOME是同义词,所以下面介绍的时候只使用ANY,SOME的用法和功能和ANY一模一样.和IN运算符不同,ANY必须和其他的比较运算符共同使用,而且必须将比较运算符放在ANY 关键字 ...

  4. 操作系统介绍、python基础

    操作系统 什么是操作系统? 操作系统位于计算机硬件与应用软件之间,是一个协调.管理.控制计算机硬件资源与软件资源的控制程序.  2.为何要操作系统 ①  .控制硬件 ②  .把对硬件的复杂的操作封装成 ...

  5. JAVA EE 项目常用知识 之AJAX技术实现select下拉列表联动的两种用法（让你真正理解ajax）

    ajax 下拉列表联动的用法. ajax的定义: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的 ...

  6. UI Watcher 解决不定时弹窗问题

    缘来是你: 在基于UI谷歌库的测试系统对第三方APK测试例,存在不定时弹窗问题,对测试例的健壮性和稳定性产生了很大影响. 为了解决这个问题,谷歌开源了UIwatcher 类来解决此问题. 附谷歌官网类 ...

  7. tile xml格式

    <map> version: The TMX format version, generally 1.0. orientation: Map orientation. Tiled supp ...

  8. hive如何使用中文查询条件

    直接在hql中使用中文会报错:org.apache.hadoop.ipc.RemoteException: java.io.IOException: java.lang.RuntimeExceptio ...

  9. select标签中的选项分组

    select标签中的选项分组 <select name="showtimes"> <optgroup label="下午一点"> < ...

  10. javascript 中contentWindow和 frames和iframe之间通信

    iframe父子兄弟之间通过jquery传值(contentWindow && parent),iframe的调用包括以下几个方面:(调用包含html dom,js全局变量,js方法) ...