vue项目，在手机上预览一直空白

最新推荐文章于 2024-07-30 23:19:52 发布

原创最新推荐文章于 2024-07-30 23:19:52 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文分享了在使用Vue开发移动端项目时，遇到无法在手机上预览页面的问题及解决方案。通过调整config/index中的host配置，并开启电脑防火墙，成功解决了手机预览问题。

因为是用vue开发的移动端项目，需要在手机预览页面效果，于是将项目中config/index中的host配置成本机ip，在电脑上运行预览完全没问题，但是在手机怎么都打不开，脑壳超级疼，后来终于找到了解决办法
config/inidex文件中配置前：

host: 'host', // can be overwritten by process.env.HOST

配置后：

host: '10.1.3.27', // can be overwritten by process.env.HOST

解决办法

打开电脑防火墙，对，你没看错，只需要打开电脑防火墙，打开电脑防火墙的方法网上又很多，就不给大家写喽，请移驾百度~~

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

manda Liu

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue项目在安卓低版本机显示空白的原因分析(两种)

12-09

vue项目在安卓低版本机显示空白原因：可能的原因一查看安卓debug，报错，可能有箭头函数语法错误，或者其他语法问题，那可能是ES6语法问题。这时候需要安装babel-pollyfill。网上找到方法如下： https://www.jb51.net/article/146840.htm 1.安装babel-polyfill和es6-promise npm i babel-polyfill --save npm i es6-promise --save 2.main.js引入 import ‘babel-polyfill‘ import Es6Promise from ‘es6

vue项目打包后打开页面空白解决办法

01-21

网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。 1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。 module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: p

参与评论您还未登录，请先登录后发表或查看评论

vue项目踩坑之安卓4,5，ios9页面空白

kayla_wang的博客

05-18

9437

最近在用vue做项目，项目在安卓4,5，ios9页面显示空白，问题解决跟大家分享一下安卓4,5，ios9页面空白原因：低版本不支持es6，需要将es6编译成es5具体解决方法1.npm install --save-dev babel-preset-es2015（安装ES2015转码规则）2.npm install --save-dev babel-polyfill3.mian.js 中引用 im...

vue打包后华为手机自带浏览器访问空白

快乐的小海绵

07-26

2486

首先肯定是有哪块代码报错了，我们的项目查找出以下二个原因 1、jquery要引入原生的js，不要用vue自带的jquery库 2、不支持vue-viewload组件貌似就是vue的某些组件和库不支持，才导致的华为浏览器访问网站空白...

vue项目打包后页面出现空白

热门推荐

qq_24882601的博客

05-23

1万+

相信很多刚刚接触vue的伙伴会遇到这样的问题，就是说vue项目在开发环境下一切正常，但是打包之后，打开index.html页面却是一片空白，打开控制台发现这样的错误出现这种情况要分两个处理方式（vue-cli2和vue-cli3），先说vue-cli2；首先找到config/index.js文件，将assetPublicPath的路径改为“./”即可， vue-cli3...

vue 项目在很多手机浏览器和pc浏览器打开时空白页面

tenc1239的博客

06-02

702

browserslistrc 文件。

vue项目实现github在线预览功能

08-27

在项目的 master 分支上，混合了源代码和页面预览文件，能不能把两者分开？而且还有一个问题，`index.html` 总是在 `dist` 路径下的，能不能项目名称直接跟 `index.html`。这里就引出另外一种办法了。另外一种办法...

Vue+ElementUI使用vue-pdf实现预览功能

10-15

在Vue.js框架的项目中，使用vue-pdf插件可以非常方便地集成PDF文件预览功能。以下是从给定文件信息中提取出的关于实现Vue+ElementUI中使用vue-pdf实现PDF预览功能的知识点。首先，要使用vue-pdf插件，需要通过npm...

vue项目打包上传github并制作预览链接（pages）

12-03

当Vue项目完成后，在根目录下打开命令行，输入命令： npm run build 实际上此命令就是执行build.js文件，将项目打包成静态资源。此命令完成后，项目根目录下会多出一个dist文件夹，dist文件里面有： static文件下...

vue2/3 - 解决使用vue-pdf插件分页预览，第一次打开正常显示，第二次打开后空白什么也不显示怎么办？解决vue项目利用vue-pdf显示预览时首次打开没问题，但二次打开就会出现不加载或报错！

高级前端工程师

07-30

3055

vue2，vue3，vue-pdf，报错，第二次打开空白，第一次打开没事，vue-pdf使用+分页预览+第一查看正常，第二次查看空白解决方案，pdf预览空白问题解决。第一次预览正常，再重新打开就空白的问题。无法预览，或者预览出现空白页，h5 vue-pdf,pdf预览,以及第二次打开空白，Cannot read properties of undefined (reading 'catch')，vue-pdf 第一次进入可以,第二次为空白，pdf预览空白问题解决。第一次预览正常,再重新打开就空白的问题，CM

vue-cli构建的移动端项目ios9以下打开页面空白问题

qq_34794441的博客

08-01

5398

造成ios9一下页面空白问题，个人遇到的是项目npm run build之后，项目里es6没有转成es5造成的。 vue-cli构建的本身已经配置好babel,es6的转码，但是还遇到这个问题。那么可能的原因是引入的文件没有转码，像我个人把http.js写在了static/js/http.js里了。在static这个文件夹下。项目编译这个文件本身不打包。所有写在这里的es6没有转成es...

Android 中的webview组件显示vue空白的解决方案

若释·飞语

07-07

5919

造成打开空白的原因有很多。常见的有路径不匹配问题以及跨域问题路径问题可以在浏览器中测试没问题之后再进行展示跨域问题可以在nginx中配置代理解决。我说的是我遇到的问题，以上方法解决不了的问题。是通过设置webview组件的参数进行解决。首先说下原因： vue组件不显示，但是Android自带的浏览器没问题，这种情况是地址中存在#造成的。可通过以下代码解决问题...

vue项目电脑端正常，手机数据空白无法获取数据！在手机上发送不出去axios 或者 ajax，请求失败

weixin_59141333的博客

06-22

3522

vue项目电脑端正常，手机数据空白参考文档结论：地址写错了！！！原本设置的是：axios.default.baseUrl =‘http://localhost:3000’ 这请求永远访问的是当前机器（PC端）的地址，电脑能请求成功！但是手机访问的时候，请求的是手机上的地址！所以应改为 axios.default.baseUrl =‘http://192.168.1.3:3000’ （改为PC端的IP+端口） package.json中设置一下 ( 这个可以不用设置 ) "scripts": {

vue 在pc端调试正常执行，移动端失败，页面空白

weixin_30439031的博客

05-09

1540

移动端对代码的执行较为严格语句出现undefined或其他时，不报错同时页面空白或在created中获取不到data的值，并且不能改变data的属性例如：　　设置memberId 时，从缓存中获取，若缓存中的userInfo为null 则移动端不报错不执行不能更改其值以及data中的其他属性的值 memberId: JSON.parse(getS...

Android webview Vue 网页不显示一片空白

心花怒放开到荼蘼

12-17

2278

1.问题 Android阿白入手Android,想要在webview 里显示一个vue 网页。发现显示不出来，一片空白。测试了百度，可以显示，测试顺便找的网页可以显示，感觉是跟Vue网页相关或者地址上的#字符。 2.原因查资料发现：Android webview 默认不支持JavaScript的脚本，需要将此项打开，才能是网页与JavaScript 正常交互，显示vue网页。 3.解决 //开启支持JavaScript脚本 webview.getSettings().setJavaScriptEnab

android 5.1 App内打开vue H5页面为空白

supremeJacob的博客

09-09

2769

android 5.1 App内打开vue H5页面为空白原因解决方法心得原因低版本的安卓系统浏览器不支持axios，所以打开空白解决方法 1、安装 es6-promise 依赖 cnpm i es6-promise 2、在封装axios的文件中使用该依赖的polyfill()方法（原理应该就是将axios转成低版本可以识别的请求方法） require("es6-promise").polyfill(); 心得太难啦，一开始还以为是VUE优化没做到位，用谷歌浏览器lighthouse进行了测评，

VUE360浏览器访问空白的问题

yangwenjie12的博客

04-26

3108

VUE项目在本地npm run dev 后用360浏览器访问127.0.0.1:8080 可以正常访问。火狐谷歌浏览器都是没问题的。然后通过npm run build 将构建的dist 放到Linux服务器的nginx下，用360浏览器不正常，一片空白。用火狐谷歌浏览器都是没问题的。问题原因：有个知识点应该都知道——VUE不支持ie7和ie8。验证方法是用360的极速模式可以正常访问线上的...

vue在电脑运行成功，手机运行显示空白的原因

qq_49416650的博客

03-11

2354

vue3，项目在手机浏览器运行空白，删除router多余路由

vue-pdf pdf文件预览(手机端，PC端)，解决报错问题(电子发票显示不全、无法显示中文、刷新显示空白)

m0_38082271的博客

04-11

3011

vue-pdf pdf文件预览(手机端，PC端)，解决报错问题(电子发票显示不全、无法显示中文、刷新显示空白)

antdesignvue imagePrew在页面空白处进行预览