浅谈vue项⽬利⽤Hbuilder打包成APP流程,以及遇到的坑1.打包项⽬
期间遇到的坑,提前说下,避免重复⼯作。
1.1打包的app出现⽩屏。
webpack打包流程 面试出现原因:路径不对,需要改config\index.js
解决办法:修改打包的路径。
1.2点击页⾯跳转不了,报 Loading chunk 2 failed. 等错误。
出现原因:不能⽤history配置路由,要⽤hash
解决办法:修改路由mode属性为hash。
1.3.点⼿机物理按钮,直接退出程序。
出现原因:⽆理返回键直接⽤监听不到路由,会直接退出程序。
解决办法:可以引⼊mui,就能正常使⽤了。
1.在f.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: '192.168.1.111:9001/',
changeOrigin: true,
pathRewrite: {
'^/propertyCmsAPI':''
}
},
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论