cordova 打包vue 集成的app , router-view 默认首页白屏

最新推荐文章于 2021-06-01 11:42:57 发布
转载 最新推荐文章于 2021-06-01 11:42:57 发布 · 716 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/vali/p/10485079.html
文章标签：

#javascript #移动开发 #ViewUI

本文详细介绍了使用Cordova和Vue.js开发WebAPP时遇到的首屏白屏问题及其解决方法。主要原因是Vue路由模式设置不当，通过调整Vue路由配置并参考历史模式的后端配置示例，成功解决了构建后的WebAPP首屏白屏的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.项目采用cordova+vue的一套东西开发的webAPP

2 在build 过h5后 ，build APP时 ，router-view 默认首页白屏

解决 方法：

vue 的router配置上架 mode::'history' ，注释掉

想细：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

转载于:https://www.cnblogs.com/vali/p/10485079.html

cordova打开外部链接_查看新闻/公告--[备忘]cordova 首页为远程网页时，后续链接在外部浏览器中打开的问题。...
weixin_29183637的博客
01-17 472
前提：cordova为5.3.3版本在config.xml中指定<contentsrc="http://www.xxx.com/mobile/"/>这样的远程地址，首页打开无问题，但是后续的链接，点击后，会在外部的浏览器中打开。当然，如果你用jquerymobile所有网页都通过ajax方式读取，是没问题的。但是，有些链接是用data-ajax=false的，即直...
Cordova打包Vue项目白屏
ansinyu的博客
11-01 798
把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
cordova打包vue项目页面白屏及不显示图片问题解决
朽木自雕的博客
04-26 2160
cordova打包vue项目页面白屏一、遇到的问题二、分析与解决 一、遇到的问题 在使用Cordova打包vue项目时，使用cordova run android进行真机调试，app总是显示白屏，也就是vue的那一部分代码没有起作用 二、分析与解决 试了很多种网上的方法，发现都没有什么用，都是过时的解决办法。 最后发现是因为路径的原因导致的。 vue项目依赖： "dependencies": { "core-js": "^3.6.5", "vue": "^2.6.11", "
cordova启动首页，访问远程服务器web_app
黄彪博客
09-07 1620
由于已经在微信浏览器（或者手机浏览器）中开发好了web应用，现在通过app打开应用访问服务页面   第一种尝试 —— 将web应用的代码一起打包到web应用中，页面全部从app本地加载代码，但是，web请求的数据是远程，因此跨域了   第二种尝试 —— 本地webview直接访问远程地址，就类似于浏览器访问远程一样，这样就不存在跨域，代码如下：  
cordova中文网
ycs_0405的专栏
06-01 1852
cordova中文网：http://cordova.axuer.com/ cordova官网：https://cordova.apache.org/
【vue】用cordova打包成app详解(解决白板问题)
当白的技术小窝 ( git : https://github.com/canwhite )
11-24 2669
1.配置环境    cordova是利用nodeJS进行管理的, 首先下载nodeJS (http://nodejs.org) ，如果是Mac已经有的话就不用装了   2. 使用命令行安装    sudo npm i  cordova -g   3. 创建工程    cordova create hello(文件夹名) com.example.hello(id) Hell...
vue-cli-plugin-cordova:Vue Cli 3 Cordova插件
04-22
$ vue create my-app $ cd my-app $ npm install -g cordova # If cordova is not already installed 将插件添加到您的vue应用。 $ vue add cordova 用法 准备 $ npm run cordova-prepare # prepare for build ...
cordova-plugin-app-version:Cordova插件返回当前应用程序的版本号
05-05
cordova plugin add cordova-plugin-app-version 带插头 使用简单的 ，您应该可以使用以下内容进行安装： plugman --platform <ios> --project <directory> --plugin ...
Android代码-cordova-plugin-app-update
08-06
cordova-plugin-app-update App updater for Cordova/PhoneGap Demo Try it yourself: Just clone and install this demo. cordova-plugin-app-update-DEMO :tada: 如果喜欢它，请别忘了给我一颗鼓励的星 Support ...
解决cordova+vue 项目打包成APK应用遇到的问题
10-17
根据给定文件内容，以下是关于使用Cordova结合Vue.js框架项目打包成Android APK应用时可能遇到的问题及其解决方案的知识点梳理： ### Cordova和Vue.js的基础介绍 - **Cordova简介**：Apache Cordova是一个开源的...
Cordova+Vue实现Android-APP开发
07-12
### Cordova+Vue 实现 Android-APP 开发 随着移动应用市场的不断扩张和发展，开发者们一直在寻找更加高效、便捷的方式来构建跨平台的应用程序。其中，使用Cordova与Vue.js组合来开发Android应用成为了一个热门的...
解决应用启动时白屏或者黑屏的问题
09-09
解决应用启动时白屏或者黑屏的问题，就是每次程序启动都会出现短暂的闪屏现象
vue2vueroutervuexcordova实现单页面webapp以及hybridapp
08-10
vue2 vue-router vuex cordova 实现单页面webapp以及hybridapp
混合应用:(基于vue) cordova打包的应用，打开出现白屏
qq_36413371的博客
07-05 1331
cordova（vue）打包后白屏: 1.没有引入 <script src=cordova.js></script><script src=cordova_plugins.js></script> 2.cordova项目有问题? 删掉重新下载XXX (用自带的html可以显示出来) （打开chrome://inspect出现 HTTP/1.1 404 Not Found） => cordova插件没有安装成功 ...
构建vue-cli与cordova的开发环境
猿子
12-25 1816
0、安装nodejs 一、安装vue-cli 1、使用npm全局安装vue-cli（前提是你已经安装了nodejs，否则你连npm都用不了），在cmd中输入一下命令 npm install --global vue-cli 2、创建自己的工作空间，在cmd切换至刚刚创建好的工作空间，如果已经有工作空间，直接切换到工作空间即可。使用命令创建一个叫做vuetest的项目 vue ...
Cordova+Vue实现Android APP开发（三）-- 设置图标和启动欢迎页详细教程
saucxs
06-28 2816
一、前言 内容是自己查资料和自己进坑出坑，适用于cordova打包android7.0版本以后的版本。我目前使用的是android8.0，android8.1，android9，androidQ等版本。（1）设置图标icon，准备好素材，在配置文件中加入不同尺寸的<icon density="hdpi" src="res/icon/android/drawable-hdpi/icon.pn...
CORDOVA+VUE打包APK文件无法访问数据接口
jiwufeiyang的博客
08-01 4062
CORDOVA+VUE打包APK文件无法访问数据接口 CORDOVA+VUE打包后运行APP，但是app中的数据请求都失败了，原因是安装的Android SDK版本较高，默认开启了对非加密明文传输的保护，所以通过http网络请求数据不会成功。 解决方法：进入项目文件夹 cordova platform remove android cordova platform add android@6.3...
cordova学习二：图标与启动屏幕设置
热门推荐
Jin's blog
06-22 1万+
一、图标设置 在config.xml里配置icon标签设置app图标 src：图片存放路径 platform:支持平台 width:图标宽度 height:图标高度 density:android下针对不同分辨率适配的图标 应用于所有平台： Amazon Fire OS：
在Vue项目中，如何正确地集成和使用Cordova插件cordova-plugin-app-update？
最新发布
10-25
在Vue.js项目中集成Cordova插件`cordova-plugin-app-update`，通常需要在支持原生移动应用开发的环境中操作，如Apache Cordova或Ionic等框架。以下是基本步骤： 1. **设置环境**： - 首先确保你的项目基于Cordova或已经添加了Cordova支持。 - 安装Node.js和npm（Node包管理器），因为Cordova插件安装通常通过npm进行。 2. **安装插件**： 使用终端或命令行工具进入项目的根目录，然后运行： ``` npm install cordova-plugin-app-update --save-dev ``` 这会将插件添加到项目的`package.json`的`devDependencies`中。 3. **配置Cordova项目**： 如果你是使用Cordova CLI（Command Line Interface），需要打开`config.xml`文件，并在`<plugins>`标签内添加这个插件： ```xml <plugin name="cordova-plugin-app-update" spec="^0.9.0" /> ``` 4. **启用插件**： 在`platforms`目录下针对你要构建的平台（例如Android或iOS），运行： ``` cordova build [platform] ``` 或者 ``` cordova prepare [platform] ``` 这会让Cordova自动在目标平台上激活这个插件。 5. **使用插件功能**： 在你的JavaScript代码中，你可以通过`window.plugins.appUpdate`访问插件提供的API。查看官方文档以了解如何调用特定的方法，比如检查更新、安装更新等。 6. **打包应用**： 最后，在构建生产版本时，记得包含这个插件： ``` cordova build && cordova run [platform] ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值