浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

1.打包项目

期间遇到的坑，提前说下，避免重复工作。

1.1打包的app出现白屏。

出现原因：路径不对，需要改config\index.js

解决办法：修改打包的路径。

1.2点击页面跳转不了，报 Loading chunk 2 failed. 等错误。

出现原因：不能用history配置路由，要用hash

解决办法：修改路由mode属性为hash。

1.3.点手机物理按钮，直接退出程序。

出现原因：无理返回键直接用监听不到路由，会直接退出程序。

解决办法：可以引入mui，就能正常使用了。

1.在webpack.base.conf.js里面引入mui。（图一）

2.下载mui相关文件，在main.js里面引入。（若需要使用mui其他方法，请自行查阅资料）（图二）

3.这个时候，引入mui可能会报错，我们需要修改一些文件。（图三）

（图一）

（图二）

（图二）

（图三）

2.Hbuilder发布

2.1创建项目5+App项目

2.2 替换文件

先删除默认的css、img、js、index.html等无用默认文件。再将打包好的dist文件夹下的static和index.html文件，放至新建的项目下。

相关app的配置可自行在manifest.json中修改，这里不做详细说明。

2.3利用云打包发布APP

如有证书，就填写证书等信息，若没有可临时用Dcloud公用证书。

填完信息，点击打包即可，之后就等待打包生成app的下载链接，进行下载安装啦。

个人记录~

补充知识：记录 vue项目打包放入 hbuilder 做app真机测试时 无法请求后台服务接口

1.因为发布app时 vue开发模式下配置的跨域是无效的，打包后会找不到接口

例如下面是之前的错误版：

'/propertyCmsAPI': {
    target: 'http://192.168.1.111:9001/',
    changeOrigin: true,
    pathRewrite: {
     '^/propertyCmsAPI':''
    }
   },

在使用时：

export const logout = params =>{return axios.post(`/propertyCmsAPI/notIntercept/logout`,params)};

这种方法在网页端打包是没有问题的，只需要在nginx 里配置下跨域就可以访问。

但是在做app时这样是访问不到数据的，因为不存在跨域的说法，打包成app后实际访问的路径就是 /propertyCmsAPI/notIntercept/logout ，这样会找不到接口，要采用绝对路径的方式，

例如：http://192.168.1.111:9001/notIntercept/logout，这样才能访问，不管你怎样配置管理你的请求api，这个是必须得，

下面是我更改后的做法正确版，完全适用：

let propertyCmsAPI = "http://112.74.126.167:9001";//打包APP时使用

// let propertyCmsAPI = "propertyCmsAPI";

分为开发模式和打包模式，然后统一管理所有请求api：

其他应该还有更好的方法，懒得研究了，目的已达到，效果已实现即可。

这一切弄好了之后就是打包，然后放入Hbuilder 编辑器进行联机测试，

2.联机测试：

安卓机，真香

1.只需要把你的手机通过USB连接电脑，2.打开手机的开发者模式，3.选择USB可以传输文件，4.打开USB调式模式，5.确认电脑可以访问该手机。

只要在hbuilder 运行里 找到你的手机点击运行就可以，会在手机安装测试app，接下来就可以测试了，很给力

苹果机，真臭

手机电脑连接苹果手机要什么鬼itues ，老子光是安装这个玩意都整了一个小时才让电脑连上手机，这个先不提

在hbuilder运行里找到iPhone点击运行后，会安装测试app，然后你要在 设置-通用里管理这个app，要选择信任才行，否则你是打不开你的测试app的

打开app后最最操蛋的事情是他丫的居然访问不了接口，控制台打印拦截器的请求信息，响应信息，发现点击请求后直接就进入catch了，根本不执行请求，错误提示就一个newwork error ，就这一个问题，整了一下午

各种搜索，百度，包括hbuilder官网给出的解决问题的方法，在原vue项目中又是引入qs ，又是引入es6-primse，然并卵

最后的最后在项目的manife.json配置中添加了一个配置：在plus的下面

"kernel":{
 "ios":"UIWebview"
},

不是专业app开发，表示不懂，问题解决，记录下日志

以上这篇浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法

    使用 Hbuilder新建好移动app项目后,mainfest.json这个文件里的 plus里设置 statusbar ..... "plus": { "statusbar": { "immersed": true }, ...... }, ..... 效果 总结 以上所述是小编给大家介绍的vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大

  • 初试vue-cli使用HBuilderx打包app的坑

    微信授权登录提示code-2 appid和appsecret应该是移动应用,而非网页应用 微信授权登录提示code:-100/自定义基座无法微信登录和分享 开发者账号配置的应用签名应该是md5加密后的值,而不是原字符串 生产环境proxyTable不生效,导致接口500 两种解决办法: ①入口文件使用网络地址,且和接口在同一域名下 ②(推荐) 入口文件依旧是index.html 在config/prod.env和config/dev.env下添加API_ROOT 'use strict' mod

  • 浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

    1.打包项目 期间遇到的坑,提前说下,避免重复工作. 1.1打包的app出现白屏. 出现原因:路径不对,需要改config\index.js 解决办法:修改打包的路径. 1.2点击页面跳转不了,报 Loading chunk 2 failed. 等错误. 出现原因:不能用history配置路由,要用hash 解决办法:修改路由mode属性为hash. 1.3.点手机物理按钮,直接退出程序. 出现原因:无理返回键直接用监听不到路由,会直接退出程序. 解决办法:可以引入mui,就能正常使用了. 1.

  • vue-cli或vue项目利用HBuilder打包成移动端app操作

    一.测试项目是否可以正确运行 指令:npm run dev 1.首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 二.修改路径 (assetsPublicPath: './') 1. 打开我们config中的js文件,修改assetsPublicPath的路径为"./"(下图的右下角位置) 2. 检查下assetsRoot: path.resolve(__dirname, '-/dist'), assetsSubDirectory: 'static',

  • 浅谈VUE项目打包后运行页面一片白问题

    目录 1.说明 2.问题说明 3.解决 3.1.index.js 3.2.utils.js 3.3.webpack.prod.conf.js 4.总结 1.说明 我们用VUE搭建一个脚手架后,在IDEA等工具中开发时,启动都没有什么问题,但是项目开发完成之后,可能需要部署上线,所以需要进行打包操作了,一般都是用下面命令进行打包: npm run build 打包过程一般没有什么问题,然后就会在工程目录下生成一个[dist]文件夹,里面就是我们打包好的文件,把这些文件部署到Nginx中或者Tomc

  • 浅谈vue项目4rs vue-router上线后history模式遇到的坑

    此次项目开发完后准备打包,因为hash模式的路径带#看着实在是有点丑,所以采用history模式.因为本次项目属于以前网站重构,但是seo问题,所以需要以前的一些地址路径写,所以vue-router的路径全部重改了.打包后查了网上一大堆,都说要把config里的index.js 里的build里的 assetsPublicPath: '/'改成'./',打包上线发现在hash模式下是没问题的, 但一旦改成history模式,有些动态js文件的路径都是错的.无奈之下死马当活马医,把'./'改回了'

  • 浅谈vue项目,访问路径#号的问题

    刚入手vue,有好多的疑问,目前遇到的是vue项目启动之后,输入http://ip:port,我发现浏览器里面显示的地址栏竟然是http://ip:port/#/,这个"/#/"不知道是什么东西,于是百度查了一下. 原因:对于vue开发的单页面应用,我们在切换不同的页面的时候,可以发现html永远只有一个,这也正是称之为单页面的原因.而vue-router默认hash模式--------使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载.因为对于正常的页面

  • 浅谈vue项目如何打包扔向服务器

    浅谈vue项目如何打包扔向服务器

    当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中.我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放到 tomcat 上. 如果是 vue-cli (非 simple 脚手架),这篇文章可能有点帮助.地址链接:vue-cli 如何打包上线 先来描述一下期间遇到的问题有哪些: 1.打包后将 dist 文件夹和 index.html 放到 tomcat,在浏览器中访问时,出现空白页,f12 提示 404. 2.打包好的静态资源均是绝对

  • 浅谈vue项目优化之页面的按需加载(vue+webpack)

    浅谈vue项目优化之页面的按需加载(vue+webpack)

    通过vue写的单页应用时,可能会有很多的路由引入.当打包构建的时候,javascript包会变得非常大,影响加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了.这样会大大提高首屏显示的速度,但是可能其他的页面的速度就会降下来.结合Vue的异步组件和webpackde code splitting feature,轻松实现路由组件的懒加载. 就像图片的懒加载一样,如果客户根本就没有看到那些图片,而我们却在打开页面的时候全部给加载完了,这

  • 浅谈 Vue 项目优化的方法

    好久不写博文了,本文作为我使用半年 vue 框架的经验小结,随便谈谈,且本文只适用于 vue-cli 初始化的项目或依赖于 webpack 打包的项目. 前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据.下面进入正题 基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style&

  • 浅谈vue项目重构技术要点和总结

    前言 最近太忙了,博客好久没有更新了.今天忙里偷闲,简单总结一下最近vue项目重构的一些技术要点. vue数据更新, 视图未更新 这个问题我们经常会遇到,一般是vue数据赋值的时候,vue数据变化了,但是视图没有更新.这个不算是项目重构的技术要点,也和大家分享一下vue2.0通常的解决方案吧! 解决方案如下: 1.通过vue.set方式赋值 Vue.set(数据源, key, newValue) 2. 通过Array.prototype.splice方法 数据源.splice(indexOfIt

  • 浅谈vue项目打包优化策略

    使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1.4M,这已经很大了,而且会影响到首屏加载.那么,怎么优化呢? 1.组件按需加载 这是首先可以优化的点.如果频繁使用了第三方组件/UI库,如我的项目中经常同时使用了 element-ui, mint-ui,echarts等组件库,如果全部引入,项目体积非常大,这时可以按需引入组件. 示例如下: 1.1 element-ui 首先,安装 babel-plugin-component: npm install babe

随机推荐