VUE CLI 4.x 打包成APP后白屏解决办法打包APP教程

一般用VUE打包项目后，再把项目打包成APK安装包，在手机上打开应用我们会发现打开是一片白，这是什么原因呢？

路由模式为history模式。
资源的路径不对。默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，而我们打包成应用时应把路径修改为相对路径，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。

接下来就教大家如何把VUE项目打包成APK

用VUE CLI创建项目vue create demo
选择Manually select features自定义配置
插件根据自己选择勾选。这是我的配置
这里选择VUE版本2.x
这里会问我们是否使用history模式，我们选择n，使用默认的hash模式
这里根据自己需要选择
In dedicated config files [在一个独立的文件中]
In package.json [放在package.json中]
Save this as a preset for future projects? (y/N)
[你希望把本次的设置保存到一个预设吗?]
等待项目创建完成后我们添加axios来完成ajax请求

cd demo
vue add axios

我们在项目目录中新建vue.config.js,这个文件应该导出一个包含了选项的对象：

// vue.config.js
module.exports = {// 选项...
}

配置参考

我们设置为相对路径'./,这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。

// vue.config.js
module.exports = {// 选项...publicPath:'./'
}

这些都完成后就可以打包项目npm run build
用HbuilderX新建项目,选择5+App
把刚创建的项目中的manifest.json文件复制到VUE项目的dist文件夹中
复制完成后右键dist文件夹选择重新识别项目类型
最后就可以使用HbuilderX云打包来把vue项目打包成APK了，妈妈再也不担心我出现白屏了。

VUE CLI 4.x 打包成APP后白屏解决办法打包APP教程相关推荐

VUE cli打包后打开白屏解决办法
使用vue cli脚手架可以快速搭建开发环境,但是开发完以后想要在本地浏览器打开的时候却是白屏的.What the F ???? 一番折腾终于找到解决办法. 项目环境版本: vue 2.5 vue-c ...
lol进入服务器后显示3秒白屏,win10系统玩lol游戏大厅变白屏解决办法介绍
win10玩lol游戏大厅变白屏怎么办?自从win10系统正式版出来后,就有很多用户对系统进行升级.有些玩家在使用win10系统玩lol时,发现游戏大厅变白屏了,导致lol玩不了不能正常游戏,所以下面 ...
脑在IDE模式下能正常启动，改成AHCI后蓝屏——解决方法
本人安装的是32位的WIN7操作系统,SATA串口在IDE模式下能正常运行,,但是在BIOS 中把IDE模式改为AHCI模式时,发现启动不了电脑,出现蓝屏,显示SOPT:0X0000007B.... ...
电脑在IDE模式下能正常启动，改成AHCI后蓝屏——解决方法
本人安装的是32位的WIN7操作系统,SATA串口在IDE模式下能正常运行,,但是在BIOS 中把IDE模式改为AHCI模式时,发现启动不了电脑,出现蓝屏,显示SOPT:0X0000007B.... ...
windows10 长时间休眠后黑屏解决办法
网上的其他办法也试过,基本无效,很头疼,按下面英文的方法在windows服务中禁用"App Readiness"服务后,测试有效,记录下来,希望帮到有需要的人. Part 1: B ...
电脑开机后黑屏解决办法
电脑开机后显示器黑屏 step_1: Ctrl + Alt + Delete ,打开管理界面,启动[任务管理器] step_2: 点击任务管理器左上角[文件],选择[新建任务(运行...)] step ...
dota2从窗口模式切换到独占全屏模式后黑屏解决办法
在dota2安装目录中查找video.txt,修改setting.defaultres与setting.defaultresheight两个参数与显示器的分辨率相同. 修改setting.fullsc ...
在mac os10.13系统下 ,将py文件打包成可执行程序后, 里面的路径出现的问题
本来用命令行运行py文件, 代码里面获取当前路径的语句例如: os.getcwd() os.path.abspath(__file__) os.path.realpath(__file__) ...
SpringBoot项目打包成jar后读取包内文件报错问题解决方法
文章目录问题描述解决办法问题描述 Springboot项目在开发环境中,使用 ResourceUtils.getFile("classpath:files/test.xlsx" ...

VUE CLI 4.x 打包成APP后白屏解决办法打包APP教程

VUE CLI 4.x 打包成APP后白屏解决办法打包APP教程相关推荐

最新文章

热门文章