详解vue 项目白屏解决方案

 更新时间:2018年10月31日 10:01:48   作者:将臣  
这篇文章主要介绍了详解vue 项目白屏解决方案,详细的介绍了白屏的解决方案,非常具有实用价值,需要的朋友可以参考下

在做的项目是使用 vue-cli 脚手架为基础的,只能使用微信浏览器打开的。在某次更新功能代码后,被反馈在一些手机上会出现白屏。经过一番探索,多管齐下解决了问题

白屏可能的原因:

  1. es6 代码没有被编译成 es5 ;
  2. 文件打包路径错误;
  3. 运营商塞入的广告 js 服务器报错,连累项目不能下载资源;

针对 1 和 2 ,分别采取以下做法:

解决位置:config/index.js 文件:把 assetsPublicPath: '/' 改为assetsPublicPath: './'

build: {
  assetsPublicPath: './',
}

解决位置:

首先安装 babel-polyfill 库;

npm install --save babel-polyfill

然后修改 build/webpack.base.conf.js 文件,将

entry: {
  app: './src/main.js',
 }

改成

entry: ['babel-polyfill', './src/main.js']

使得其从入口文件就开始转换代码。

做了上面的操作后,问题就解决了,因此没有对 3 进行实践。

3 的情况,是以前的经验之谈。部分用户出现了打不开页面的情况,刚好同事的手机也遇到同样的情况,拿来分析之后发现,是运营商劫持了流量,往里面塞了广告 js ,结果它的服务器还出错.....解决方案是上 https ,完美解决。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue elementUI 自定义表单模板组件功能实现

    Vue elementUI 自定义表单模板组件功能实现

    在项目开发中,我们会遇到这种需求,在管理后台添加自定义表单,在指定的页面使用定义好的表单,这篇文章主要介绍了Vue elementUI 自定义表单模板组件,需要的朋友可以参考下
    2022-12-12
  • 关于怎么在vue项目里写react详情

    关于怎么在vue项目里写react详情

    本篇文章是在vue项目里写tsx的一篇介绍。其实vue里面写jsx也挺有意思的,接下来小编九给大家详细介绍吧,感兴趣的小伙伴请参考下面的文章内容
    2021-09-09
  • ElementUI动态渲染el-table的实现过程

    ElementUI动态渲染el-table的实现过程

    在前端开发中,表格是不可或缺的一部分,无论是数据展示、数据录入,还是数据分析,表格都扮演着重要的角色,而在Vue.js生态系统中,ElementUI提供了一个强大且灵活的表格组件——el-table,本文将带你深入了解如何使用ElementUI动态渲染el-table,并详细探讨其原理及实现过程
    2024-08-08
  • vue+px2rem实现pc端大屏自适应的实例代码(rem适配)

    vue+px2rem实现pc端大屏自适应的实例代码(rem适配)

    不管是移动端的适配,还是大屏需求,都离不开不一个单位rem,rem是相对于根元素的字体大小的单位,下面这篇文章主要给大家介绍了关于vue+px2rem实现pc端大屏自适应的相关资料,需要的朋友可以参考下
    2021-08-08
  • vue如何在store仓库中使用路由

    vue如何在store仓库中使用路由

    这篇文章主要介绍了vue如何在store仓库中使用路由,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • element-ui图片上传组件查看和限制方式

    element-ui图片上传组件查看和限制方式

    这篇文章主要介绍了关于element-ui图片上传组件查看和限制方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue+vux vux安装出现错误问题及解决

    vue+vux vux安装出现错误问题及解决

    这篇文章主要介绍了vue+vux vux安装出现错误问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 浅谈Vue使用Elementui修改默认的最快方法

    浅谈Vue使用Elementui修改默认的最快方法

    这篇文章主要介绍了浅谈Vue使用Elementui修改默认的最快方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-12-12
  • vue使用driver.js完成页面引导功能的示例详解

    vue使用driver.js完成页面引导功能的示例详解

    在Vue中,driver.js通常是指用于实现用户引导和教程功能的JavaScript库,它可以帮助开发者在应用程序中创建交互式的引导和教程,以引导用户了解应用程序的不同功能和界面,本文就简单的给大家介绍一下vue如何使用driver.js完成页面引导功能
    2023-08-08
  • vue基于Echarts的拖拽数据可视化功能实现

    vue基于Echarts的拖拽数据可视化功能实现

    这篇文章主要给大家介绍了关于vue基于Echars的拖拽数据可视化功能实现的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12

最新评论