cordova打包vue项目页面白屏及不显示图片问题解决_cordova 安卓白屏-程序员宅基地

技术标签: # vue  cordova  vue  前端  

cordova打包vue项目页面白屏及不显示图片问题解决

一、遇到的问题

在使用Cordova打包vue项目时,使用cordova run android进行真机调试,app总是显示白屏,也就是vue的那一部分代码没有起作用

二、分析与解决

试了很多种网上的方法,发现都没有什么用,都是过时的解决办法。
最后发现是因为路径的原因导致的。

  1. vue项目依赖:
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  }
  1. cordova项目依赖
  "devDependencies": {
    "cordova-android": "^9.1.0",
    "cordova-plugin-whitelist": "^1.3.4"
  }
  1. vue.config.js配置
module.exports = {
  publicPath: '././',   // 给打包出来的路径附上 ./ 前缀
  outputDir: '../www' // 将项目打包到 Cordova项目的www目录,文件夹目录不一样的,这个需要自己改
}

在这里插入图片描述

  1. 其实就是文件的路径前面需要加上./js或者./css
    在这里插入图片描述
  2. 这个时候可以看见vue写的页面了,但是此时图片还是不显示。原因之一:是由于使用了vue的history模式导致的。切换到hash模式就可以显示图片了。(切到history的原因是之前试页面白屏的时候弄的)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_16687863/article/details/116165210

智能推荐

在线大数据学习,效果怎么样?-程序员宅基地

文章浏览阅读687次。(一)在线学习过程性活动记录子系统虚拟的在线学习过程可以看作是五类元素的组合,即学习者、学习资源、交互、事件以及学习结果。这五个元素之间相互影响,密切相关,共同构成系统的在线学习活动。根据在线学习活动属性与关键内容,我们将记录子系统中的过程性活动分为互动交流、资源使用、学习作品、资源分享、平台利用、自我评价、学伴评价、教师点评、学习反思和成长记录等核心活动。Web爬虫具有目标信息采集准确、应用...

查找编号(倍增)-程序员宅基地

文章浏览阅读118次。查找编号输入样例11 31 3 3 3 5 7 9 11 13 15 151 3 6AC代码#include<cstdio>using namespace std;int n,m,a[2000005];int main(){ scanf("%d%d",&n,&m); for(int i=1;i<=n;i++) scanf("%d",&a[i]); for(int i=1;i<=m;i++) { int x,ans=0;_查找编号

接口鉴权功能的实现_java rpc调用系统鉴权方式有哪些-程序员宅基地

文章浏览阅读1.2w次,点赞14次,收藏42次。一、背景随着系统的发展,单体应用主键演化成微服务架构。系统微服务化之后,若干个微服务之间会有调用。同个部门内实现的服务会被内部调用,一般风险是可控的。但是如果服务提供给别的部门使用之后,在不了解对方的使用场景,接口调用QPS等,如果对方接口调用量过大,会影响整个使用该服务的调用方,且对接口的安全性也会有风险。在这种情况下,每个微服务都需要对调用者进行鉴权。基本的鉴权维度有:应用鉴权:对方在..._java rpc调用系统鉴权方式有哪些

ramdisk tmpfs_site:csdn.net ramdisk的概念-程序员宅基地

文章浏览阅读772次。http://www.lupaworld.com/home-space-do-blog-uid-56821-id-139835.html一)ramdisk1)概念ramdisk就是指使用一部分内存空间来模拟硬盘分区,也就是说ramdisk是一个块设备,要用mkfs格式化,才能真正使用它..ramdisk在内核2.0/2.2版本就已经支持..ramdisk设备是它不允许重新声_site:csdn.net ramdisk的概念

C语言中除法怎么取得小数_c语言如何除法得到小数-程序员宅基地

文章浏览阅读3.1w次,点赞22次,收藏23次。除了一开始用float进行定义之外,后面进行除法运算的时候要加.0,否则算出的结果电脑会自动取整~~如:3/2的结果和3.0/2的结果就不同~~因为没有定义3/2为浮点型,所以3/2自动取整,结果等于1而3.0/2,由于预先用浮点型表示其结果显然为:1.5_c语言如何除法得到小数

python+django+uwsgi+nginx+virtualenv 部署高可用的python web环境_1397981667-程序员宅基地

文章浏览阅读4.2k次。【摘要】 最近开始部署python的web环境,说实话对于python的单一站点部署还是有经验的,毕竟带团队已经多年(吹一下NB)。那么问题来了,不同版本的python环境部署还是必须了解的。今天,终于解决了python不同版本的环境配置。进入正题,我采用virtualenv 进行python环境隔离,部署不同的版本。然后在Nginx上进行反向代理,实现pythonweb环境。一、_1397981667

随便推点

立创EDA元件封装导入AD软件教程_立创的封装怎么加到ad-程序员宅基地

文章浏览阅读5.7w次,点赞50次,收藏320次。由于项目的需要,8月份基本都是在画板子,有四版电路要画,STM32的出两版电路,pic芯片的出两版电路,有不同的电流采集方案,需要实际测试各种方案的优劣性。目前板子已经画了两块了,还有两块。在绘制期间,最烦的事情莫过于芯片选型后的绘制部分了,原理图库绘制,PCB封装绘制。立创商城是众所周知的元件购买平台,也做得很好,大多数的元件都有绘制了封装可以下载。不过目前立创在推广他们的免费画板..._立创的封装怎么加到ad

PHP性能分析工具xhprof的安装使用与注意事项-程序员宅基地

文章浏览阅读76次。前言xhprof由facebook开源出来的一个PHP性能监控工具,占用资源很少,甚至能够在生产环境中进行部署。它可以结合graphviz使用,能够以图片的形式很直观的展示代码执行耗时。下面主要讲一下安装和使用过程1、安装(1)下载和解压12wget http://pecl.php.net/get/xhprof-0.9.4.t..._/usr/local/src/xhprof/xhprof/extension/xhprof.c:22:10: fatal error: 'php.h

第一章 Python基础_code directory b-程序员宅基地

文章浏览阅读708次,点赞8次,收藏6次。在编程中,**反射(Reflection)**是指在运行时检查、探知和修改程序状态或行为的能力。通常,反射允许程序在运行时获取类型信息、方法和属性,以及在运行时创建、修改、删除类、对象、方法和属性。在Python中,反射通常通过内置的`getattr`、`hasattr`、`setattr`等函数实现。以下是反射的一些常见应用场景:1. **动态导入模块和调用函数:**通过字符串形式指定模块名和函数名,然后动态导入模块,并在运行时调用相关函数。func()_code directory b

HashMap循环遍历方式-程序员宅基地

文章浏览阅读6.8k次,点赞6次,收藏11次。本教程将为你展示Java中HashMap的几种典型遍历方式。参考文章:Java中遍历HashMap的5种方式如果你使用Java8,由于该版本JDK支持lambda表达式,可以采用第5种方式来遍历。如果你想使用泛型,可以参考方法3。如果你使用旧版JDK不支持泛型可以参考方法4。1、 通过ForEach循环进行遍历mport java.io.IOException;import java.util.HashMap;import java.util.Map; public class Test_hashmap循环遍历

java double类型保留两位小数并去除后面多余的0_java中double后面很多0-程序员宅基地

文章浏览阅读336次。【代码】java double类型保留两位小数并去除后面多余的0。_java中double后面很多0

PLS中的权值和载荷_pls 载荷-程序员宅基地

文章浏览阅读2.7k次。很多人学习PLS之前是从PCR入手的,我个人认为这是PLS不错的打开方式,PCR和PLS主要区别是两者在权值W的选择上有本质的区别。PCR的权值选择是基于X本身的特征向量,而PLS则根据X‘Y的特征向量来选择。PLS早在80年代就已经提出来,当时计算特征向量并不像今天这么容易,随便调用一个SVD就行。当时求特征向量是通过幂法得到,所以,在PCR和PLS中都能找到NIPALS算法,这个迭代算法主..._pls 载荷