关于使用hbuilder 打包vue的问题

最新推荐文章于 2024-08-11 13:18:04 发布
最新推荐文章于 2024-08-11 13:18:04 发布
阅读量8.5k 收藏 5
点赞数 2
分类专栏： 移动开发 文章标签： vue.js Hbuilder webpack app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yq_oxygen/article/details/78059177
版权
本文记录了使用Hbuilder将Vue应用打包成APP时遇到的两个主要问题及解决方案：1) 白屏问题，通过检查webpack语法错误和调整build的assertPublicPath解决；2) 图片路径问题，通过将img的src引用改为require(src)来解决。旨在为开发者提供参考。
摘要由CSDN通过智能技术生成

这几天心血来潮，把之前做的vue应用用Hbuilder做成app，之中出现几个问题，现记录下来，以供大家参考：

1. 打包后，真机调试出现白屏：

1） 先在本地查看是否webpack后有语法错误，我的代码webpack后

	<meta name=viewport content="width=device-width user-scalable=no">
会变成 

	<meta name=viewport content="width=device-widthuser-scalable=no">
中间空格没了，导致报错。

2） 确定代码没问题的话，一般就是打包的路径出了错：

最低0.47元/天 解锁文章
小羊说前端
关注
专栏目录
HbuiderX 打包Vue-cli3项目遇到的问题小结
m0_47251040的博客
06-02 788
HbuiderX 打包Vue-cli3项目遇到的问题小结 小白一只，最近做了一个简单的vue-cli3的h5应用，在打包时遇到了一些问题，在网上看了很多的博客，也在b站上看了视频，总结一下解决方法。 一、npm run build时运行错误：UnhandledPromiseRejectionWarning 在npm run build时出现如下错误（仅报错提示开头部分代码），可以猜到是css编译错误 Error processing file: static/css/app.177e6d2d6d094128
使用Hbuilder打包vue项目app
Leisure_Time的博客
01-10 564
vue项目， HBuilder / HBuilderX有的情况下 第一步， 使用HBuilder创建一个app项目， 我使用的是HBuilderX， 步骤如下： 选择左上角， 文件， -> 新建 -> 项目 会出先这样的画面： 那么我们选择 5+App那个选项， 这样我们就有一个基本的app模板了 然后我们在打包我们的vue项目， 使用npm run builder...
vue3 快速入门 (七) : Vue打包并部署到Nginx服务器上
最新发布
朱豪凯的博客
08-11 1312
介绍vue3中怎么打包，并部署到Nginx服务器上
HBuilderX打包Vue + elementUi项目报错
分享技术，记录问题，努力学习
01-30 1090
HBulderX打包Vue + elementUi项目报错 第一步： 在Src同级目录下创建.babelrc文件，文件内容： { "presets":["es2015"] } 第二步： 在webpack.config.js文件中的module块中修改js： module: { rules: [ { test: /\.vue$/, use: ['...
vue cli3项目用hbuilder打包成app问题总结
weixin_42595284的博客
01-10 1414
一、打开APP白屏 1，vue项目在打包前修改vue.config.js文件 2，在router.js中把mode:“history”,这行代码注释掉 二、单击 手机返回键退出应用的bug。（可以直接把这段代码放到你vue项目中的index.html，重新打包，再放回来，也可以直接修改这个index.html） 代码如下： <script> document.addEventLi...
hbuilderx打包h5出现白屏问题
m0_68956554的博客
10-30 1513
白屏问题的原因可能是你的 H5 项目部署后的资源路径有问题。当访问页面时，浏览器会根据资源的相对路径去加载相应的文件。如果资源路径不正确，浏览器无法正确加载文件，导致页面出现白屏。在vue.config.js文件里面添加如下代码。
vue项目使用hbuilder打包后，真机测试白屏
weixin_30824479的博客
03-30 4366
在命令行直接运行 npm run build后，生成的dist文件中,直接打开index.html文件 Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work. 打包完后，提示只能在服务端可以开启，file模式下无法工作 问题： 使用vue脚手...
使用HBuilder打包vue客户端app
热门推荐
ytangdigl的博客
01-05 1万+
1、使用npm run build 命令 将vue项目打包,生成打包文件dist。 2、使用HBuilder打开dist文件目录 3、在HBuilder中右键项目目录名，点转换成移动App,会生成manifest.json文件 4、在线打包移动App 右键项目名，点发行—>云打包-打原生安装包 弹出App去端打包窗口，勾选Android,然后点“参数配置” 在参
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
12-12
以上所述是小编给大家介绍的vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
HBuilderX 打包 vue 项目生成 apk
GIS（地理信息系统）
07-15 1593
HBuilderX 打包 vue 项目生成 apk
Hbuilderx:Vue项目打包apk打开首页空白问题
席木木的博客
11-09 1726
Hbuilderx:Vue项目打包apk打开首页空白问题：可能是打包时没有修改前端项目默认的公共基础路径，或者是路由模式不支持。
HBuilderX打包Vue为apk，安装之后主界面空白问题
flash_love的博客
11-17 5253
今天用HBuilderX打包Vue项目为apk，并安装到手机上，打开主页发现页面空白。 主要是打包配置问题，需要修改vue.config.js中配置问题。因为我用了Vue cli4.X版本，没有config文件，所以需要自己新建一个配置文件，并且配置项也稍微有点不同了，根据官网修正为最新的配置项。 vue.config.js module.exports = { publicPath:'./' } 同时，Vue的路由模式要改成Hash，而不是History模式 const router = new
vue项目通过HBuilderX打包成app出现白屏
Noctis99的博客
09-08 2732
v
使用HBUILDERX将VUE-CLI3文件打包成APP，以及解决打包后的APP出现白屏的问题（简单示例）
ALDNOAH_K的博客
10-11 1799
（原因：如果使用history模式上线，必须要服务端在服务器上有对应的模式才能使用history（看上面链接），如果服务器上没有配置，可以先使用默认的hash；4、更改 manifest.json的配置文件，因为是demo练习，我这里只进行了两个配置，其它需要配置的根据自己的项目需求完成。5、选择需要打包的项目，在工具栏中选择 发行---->原生App-云打包，出现如下弹框。可选值: "hash" | "history" | "abstract"1、文件 ---->新建 ---->项目。
【Web】HBuilder运行项目出现报错 Module not found: Error: Can‘t resolve ‘vue-router‘ in ‘ …… ‘
趁着头发多我想做游戏
01-29 6477
现象 使用HBuilder运行或者构建项目时出现 Module not found: Error: Can't resolve 'vue-router' in ' …… ' 之类的错误。 原因 npm install 时有一些包没有正确引入，``Module not found: Error: Can’t resolve ‘vue-router’ in ’ …… ’ 就是 vue-router 包没有正确导入。 解决办法 先看看自己本地的/NodeJS/node_modules/npm/node_modul
hbuilderX运行Vue3/Vite版项目报错 error during build 解决方法
舜岳的博客
08-02 5871
m1pro编译vite/vue3cli项目时编译报错。
hbuilder 打包app跳转路径问题（url 跳转问题）
无问西东的博客
01-21 9972
hbuilder 打包app跳转路径问题（url 跳转问题）
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值