vue页面空白（Vue项目在部分ios手机Safari浏览器上打开为白屏）
本文目录
- Vue项目在部分ios手机Safari浏览器上打开为白屏
- vue打包后出现空白，请求不到js数据问题---router 坑
- vue-element-admin打包后网页空白解决方法
- 解决 vue.config.js publicPath：‘././’ 项目运行页面空白问题
- IOS下 用vue开发前端项目 点击返回 页面出现空白
- vue项目打包后打开页面空白解决办法
- vue渲染页面,后台数据又返回,但是页面空白,控制台init
- vue路由在多级页面下，页面刷新空白（history模式）
- Vue项目编译后部署在非网站根目录页面显示空白解决方案
- vue一个弹窗导致页面空白
Vue项目在部分ios手机Safari浏览器上打开为白屏
Vue项目在部分ios手机Safari浏览器上打开为白屏有可能是一下原因造成：
第一：部分es6语法不兼容 推荐在全局引入 babel-polyfill 解决es6在Safari的兼容问题
第二：有部分Safari浏览器设置了不允许网站读写所有cookie，不允许网站跟踪，这种情况下在项目中使用 localStorage sessionStorage cookie都会报错（大部分是这个原因）
查看Safari隐私和安全性：设置-》 Safari
第三：在Safari如何跟踪调试
1、打开手机端web检查器，设置-》 Safari -》高级（最底部）-》 Web检查器打开
2、确保iOS系统手机接入 MAC 电脑（必须是Mac，window调试不了ios系统）
3、找到Mac电脑的 Safari浏览器，找到开发者，就会显示的手机的设备
4、此时此刻就可以使用了，调试各个App上网页版的页面了。
注：如果是 Hybrid 嵌入式开发，线上版本，可能就不能调试了，因为IOS App 会把线上的调试功能 给禁用，安全！
vue打包后出现空白，请求不到js数据问题---router 坑
hash模式中的#相当于读取一个锚点链接，而history主要是读取主域名后面的参数也是相当于描点但是为了好看去除掉了链接上的#
例：taobao.com是主域名，taobao.com/#list 这时锚点到当前list的位置，再去请求相应的js和css
因为history模式中，头部链接是以/模式进行，而后端配置路由一般是由Nginx代理的，例如:taobao.com/list ，Nginx只会判断你有没有list这个文件夹，没有则会直接给出404页面，所以需要后端做相应的重写规则
vue-element-admin打包后网页空白解决方法
使用
命令进行打包
会出现这样的情况
生成了一个静态的文件夹,打开index.html的时候
会出现页面空白的问题
打开F12查看一下这是为啥
会发现这些文件的路径访问不到
在源码文件中打开 vue.config.js
将 publicPath: ’/’ 改成 publicPath: ‘./’
然后使用 npm run build:prod 重新打包
打开浏览器，路径都是正确的，没有报错，如果这个时候，还是不显示界面内容
需要打开 router 文件
路由模式将 histroy 改成 hash 模式，起初 mode:‘history’
解决 vue.config.js publicPath：‘././’ 项目运行页面空白问题
解决方法，下面三个必填
module.exports = {
lintOnSave: false, //如果为false，就是取消eslint规则的检查
publicPath: "./",
assetsDir: "static",
outputDir: ’dist’,
}
IOS下 用vue开发前端项目 点击返回 页面出现空白
原地址
问题描述：
进入A页面——》B页面——》ios自带的返回——》白屏出现——》手动点击白屏处——》问题解决
原因分析:
在ios机器上使用webview开发Vue项目时候，go history(-1)， 无法将body的高度拉掉，使得遮住，触发轻点击，方可消除遮罩
解决方案实现原理：
html，body都是100%，#app撑起了父元素的告诉，但是浏览器默认的滚动scroll并不是#app，而是body,某些因素，造成返回history 后，无法复原（ios 的锅），为此，我们将#app 进行了绝对定位，并让它重新成为 scroll 的对象，从而解决问题
vue项目打包后打开页面空白解决办法
网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。
1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。
assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级目录下面。 所以要改为 ‘./ ’
2、另外还需要注意一点。src里边router/index.js路由配置里边默认模式是hash，如果你改成了history模式的话，打开也会是一片空白。所以改为hash或者直接把模式配置删除，让它默认的就行 。如果非要使用history模式的话，需要你在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html,这个页面就是你app依赖页面。
vue渲染页面,后台数据又返回,但是页面空白,控制台init
路由重复。如果配置了两个路由是重复的，比如配置了两个path：‘/’，那么访问就会看到空白页面，这时候改下重复的路由配置即可。如果配置了两个路由是重复的，比如配置了两个path：‘/’，那么访问就会看到空白页面，这时候改下重复的路由配置即可。
vue路由在多级页面下，页面刷新空白（history模式）
需要修改config/index.js文件，将assetsPublicPath的值改为assetsPublicPath: ’./’
找到项目文件下的vue.config.js（没有就自己创建一个），将baseUrl:""改成baseUrl:"/"
找到项目文件下的vue.config.js（没有就自己创建一个），配置publicPath: ’/’, // 根路径 cli3.0以上使用publicPath替代baseUrl,解决build后找不到静态资源的问题
项目当中，路由模式不设置时，默认的是hash。
而设置history后，一级路由刷新页面不会报错，而二级以上路由，会出现这么一个问题，
提示：
这时候，我们点击错误，发现问题出现在public中的index.html中，
首先，我们可以排除是vue原页面的问题，
我们每次刷新页面的前打开浏览器的network，我们再刷新，然后会发现，js请求的位置不对，
原因：
在history模式中，请求多级路由下的静态资源，会带上多级路由的地址
解决方法：
Vue项目编译后部署在非网站根目录页面显示空白解决方案
***隐藏网址***
***隐藏网址***
这种情况是vue项目的路由指向问题。
在vue项目 index.js 中添加需要访问的子目录路由即可。
vue一个弹窗导致页面空白
路由重复。该设备一个弹窗导致页面空白是因为路由重复导致的，Vue是一套用于构建用户界面的渐进式JavaScript框架与传统JS和JQuery框架不同，Vue的渐进式框架表示开发者可以由简单组件写起。
更多文章：
sqlite格式的视频怎么打开（.sqlite是什么文件，用什么工具打开）
2026年11月7日 05:30
element ui面试题（用element-ui ELDialog和ELTable遇见的坑）
2026年11月7日 04:40
2026年11月7日 03:30
中文自动翻译成英语的输入法（有没有一种输入法能将打出来的中文自动变成英文）
2026年11月7日 02:10
equals to（为什么有些英文句子要用的是“equals to that of” 这个that和of之间还可以加名词吗）
2026年11月7日 01:50
default values（电脑开机后出现all settings was reset to default values.）
2026年11月7日 01:20
structured reviewing翻译（软件测试的英文翻译）
2026年11月7日 00:50
2026年11月6日 22:50
2026年11月6日 22:20
2026年11月6日 21:50
