vue 3.0 结合cordova 编译apk,解决白屏问题

最新推荐文章于 2024-07-09 14:13:59 发布
最新推荐文章于 2024-07-09 14:13:59 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： java 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/superium/article/details/104098627
版权
本文主要探讨了Vue 3.0项目与Cordova集成过程中遇到的白屏问题及其解决方案。白屏通常由于资源未找到引起。在vue.config.js中，需正确配置outputDir、publicPath和assetsDir以确保资源能被加载。此外，还可能涉及到https协议、服务器跨域设置以及本地代理配置等其他可能导致白屏的原因。
摘要由CSDN通过智能技术生成

白屏其实就是因为找不到资源,导致无法显示.

目录结构:

cordova-project
– vue-project
– www
– platforms

vue配置

所以vue的配置文件 vue.config.js (vue根目录下):

module.exports = {
   
    "transpileDependencies": [
        "vuetify"
    ],
    publicPath: './',
    outputDir: '../www/',</
最低0.47元/天 解锁文章
superium
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cordova 资源不加载和白屏问题解决！！！！！！！！！
风如刀割的博客
12-11 3163
1.cordova 白屏，打开chrome查找原因发现资源不加载，此时需要检查 a.代码有没有问题，可能你会想就是是代码错误，也不应该出现资源不加载的问题，但是恰巧就是这样2.android平台问题，你需要更新或者退回平台； b. cordova 白屏，打开chrome 发现是http服务权限问题，原因（Android 9.0 P（Pie）预计在8月发布，其网络通信将默认为TLS。为...
Cordova打包Vue项目白屏
ansinyu的博客
11-01 703
把dist文件放上，run起来发现是白屏。 解决方案 1、设置路由模式为：hash router/index.js const router = new VueRouter({ // mode: 'history', mode: 'hash', base: process.env.BASE_URL, routes }) 2、修改vue.congfig.js中的publicPath为：’./’， module.exports = { // lintOnSave: true
Vue3.0 新特性以及使用经验总结
最新发布
卷不动的程序员
07-09 1040
Vue3.0 在去年 9 月正式发布了，看大家都有在热情的拥抱 Vue3.0。今年初新项目也开始使用 Vue3.0 来开发，这篇文章就是在使用后的一个总结， 包含 Vue3 新特性的使用以及一些使用经验分享。js}, 1000);// 修改age值时会触发 watch的回调 watch( () => state.age, (curAge, preAge) => { console.log("新值:", curAge, "老值:", preAge);} );}, });js}, 1000);
ios使用cordova插件偶现白屏
Lemon18226601623的博客
04-23 1097
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
cordova打包vue项目页面白屏及不显示图片问题解决
朽木自雕的博客
04-26 1857
cordova打包vue项目页面白屏一、遇到的问题二、分析与解决 一、遇到的问题 在使用Cordova打包vue项目时，使用cordova run android进行真机调试，app总是显示白屏，也就是vue的那一部分代码没有起作用 二、分析与解决 试了很多种网上的方法，发现都没有什么用，都是过时的解决办法。 最后发现是因为路径的原因导致的。 vue项目依赖： "dependencies": { "core-js": "^3.6.5", "vue": "^2.6.11", "
关于cordova打包vue写的web-app时容易出现白屏以及部分BUG不能测出的问题
qq_25000935的博客
11-15 4388
打包成apk说明 vue文件修改 index.html 中必须添加&lt;meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"&gt; &lt;meta name="format-detection" cont...
解决cordova+vue 项目打包成APK应用遇到的问题
11-29
在开发移动应用时，有时需要将前端框架如Vue与Cordova结合，以便将Web应用打包成原生的Android APK。本篇文章将详细讲解如何解决在使用Cordova和Vue.js进行项目打包过程中可能遇到的问题。 首先，我们需要确保开发...
解决vuecli3.0热更新失效的问题
10-17
5. 寻求社区帮助：当以上步骤都无法解决问题时，开发者可以向Vue.js社区寻求帮助。在社区中，可以搜索相关问题，看看是否有其他开发者遇到类似问题并找到了解决方案。同时，也可以在社区中提问，许多热心开发者可能...
Vue3.0配置多页面应用
03-17
Vue3.0是一个备受瞩目的前端框架更新，它引入了许多新特性和性能优化，使得开发者在构建复杂Web应用时更加高效。"Vue3.0配置多页面应用"是指利用Vue3.0框架来开发包含多个独立入口的Web应用程序，每个入口对应一个...
配置一个vue3.0项目的完整步骤
10-17
配置Vue 3.0项目的完整步骤是当下前端开发者们关注的热点话题之一。随着Vue.js框架的持续发展和版本迭代，Vue 3.0作为最新的主要版本，为开发者带来了许多创新的特性和改进。本文将详细介绍如何从零开始配置一个Vue ...
react + cordova 启动首页白屏
weixin_44240581的博客
04-02 378
生成打包文件路径的问题 creact-react-app项目 umi项目 打包后的index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1
vuetify-cordova：使用Vue.js的混合应用程序的应用程序模板Vuetify Cordova
02-05
Vuetify-Cordova VuetifyJs App模板可用于Cordova App。 Web演示 Android演示 最初设定 # install dependencies npm install # add respective platforms cordova platform add android cordova platform add ios 生成命令 # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build
cordova Vue打包
青阳的博客
05-05 222
cordova创建项目seedApp cordova create seedApp Cordova创建应用出错 Cordova安装时不能使用cnpm 应该使用npm，cnpm虽然快但是后期出的错绝对比这省下来的时间多得多。 正确安装方法 npm install -g cordova 将镜像修改为淘宝镜像 二、vue项目导入：将Vue项目除了：node_modules及.git文件...
cordova打包vue生成的app的一些问题
菜菜鸟的博客
12-05 3253
1. app白屏 可能有下： 1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。 assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级目录下面 module.exports = { b...
智慧巡查平台（Ionic/Vite/Vue3 移动端） 问题记录
Lyrelion的博客
10-26 984
智慧巡查平台（Ionic/Vite/Vue3 移动端） 问题记录
Vue3.0入门 + Vant3.0移动端实践（三）使用Cordova打包Android App
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
11-13 6710
接着上面两节，把做成的h5小应用打包成android的app放置在手机上看看效果。 如何把一个h5应用打包成android的app? 使用Cordova就是一种简单不错的办法。 当然也有其他的一些办法如使用HBuilderX这一强大的IDE工具，里面支持打包Android或ios的app,微信小程序等。或者一些第三方的打包平台，也支持把h5的应用打包成app，但有可能是收费的。 使用HBuilderX的话若开发体系都是基于HBuilder则是不错的选择，但太依赖于HBuilder。 而使用Cordo
android启动页白屏的问题
LXFX1108的专栏
04-26 289
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> ...... <item name="android:windowIsTranslucent">true</item> <item name="android:windowNoTitle">...
vite+vue3使用vant和适配移动端+scss
weixin_43631677的博客
04-07 2066
vite+vue +vant+scss
vue2 cordova打包apk
08-24
为了将Vue打包成APK，你可以使用Vue Cordova这种方法。下面是具体的步骤： 1. 首先，你需要创建一个Cordova项目。你可以使用以下命令在终端中创建一个Cordova项目： ``` cordova create cordova-app com.ysh mapp `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值