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的渐进式框架表示开发者可以由简单组件写起。
更多文章：
interpl（MATLAB中插值函数interpl怎么定义）
2026年11月2日 23:30
2026年11月2日 23:00
![path的音标（音标[pa:θ]是什么单词）](/static/images/nopic/2.jpg)
2026年11月2日 22:50
2026年11月2日 21:10
四舍五入用哪个函数（用于进行四舍五入的数学函数是以下哪一项）
2026年11月2日 20:10
2026年11月2日 20:00
单片机unsigned什么意思（为什么单片机编程变量都要定义成unsigned）
2026年11月2日 19:30
java编程俄罗斯方块（求java编的俄罗斯方块代码！ 最好是网络版的！单机版的也好啊！谢谢诶啊）
2026年11月2日 18:20
2026年11月2日 16:20
sql更新某一列的值（sql server2000 如何向表中逐条更新某一列的值，各行值通过随机数产生）
2026年11月2日 16:10
