详解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 ，完美解决。

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

赞 (0)

相关推荐

  • 如何解决vue2.0下IE浏览器白屏问题

    如何解决vue2.0下IE浏览器白屏问题

    公司新开发的项目需要兼容到IE9+ 就在index.html页面加入 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 不起作用 总结方法: 1.兼容IE9/IE10可能会遇到语法或者 Promise错误,安装 babel-polyfill npm install babel-polyfill 2.在页面入口配置main.js中引入 babel-polyfill import("babe

  • 解决vue build打包之后首页白屏的问题

    1.问题描述 本地的vue项目在server端浏览没问题,但是执行npm run build 打包之后在本地预览是白屏.有很多js,css无法加载. 2.解决方法 在config文件夹中找到index.js打开把assetsPublicPath: '/'改成下图方框中的样子. 再次执行 npm run build 就可以了. 以上这篇解决vue build打包之后首页白屏的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue2.0使用过

  • 解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题

    Vue使用swiper插件时特别是轮播元素含有动态数据时可能会出现数据为空或者白屏的问题 使用下面的方法可以解决(保证在数据请求之后再渲染页面) 页面结构 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide tpOne" v-if="topInfo"> <-- 此处为绑

  • 详解vue 项目白屏解决方案

    在做的项目是使用 vue-cli 脚手架为基础的,只能使用微信浏览器打开的.在某次更新功能代码后,被反馈在一些手机上会出现白屏.经过一番探索,多管齐下解决了问题 白屏可能的原因: es6 代码没有被编译成 es5 : 文件打包路径错误: 运营商塞入的广告 js 服务器报错,连累项目不能下载资源: 针对 1 和 2 ,分别采取以下做法: 解决位置:config/index.js 文件:把 assetsPublicPath: '/' 改为assetsPublicPath: './' build: {

  • 详解vue项目打包后通过百度的BAE发布到网上的流程

    经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. 继续编辑终于将自己写的JSON文件模拟的数据也传上去了. 具体的步骤: 1,首先讲写好的vue项目打包(具体的打包过程我就不在说了,直接npm run build,就会在VUE项目文件中重新创建一个dist文件,这个就是打包好的项目) 2,在百度的应用引擎BAE部署一个项目,一天才2毛钱很便宜.自己

  • 详解Vue项目引入CreateJS的方法（亲测可用）

    1 前 言 1.1 CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具. 基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5. 包含4类工具库 EaselJS

  • 详解Vue项目的打包方式(生成dist文件)

    详解Vue项目的打包方式(生成dist文件)

    目录 一.相关配置 情况一(使用的工具是 vue-cil) 情况二(使用的工具是 webpack) 二.打包 一.相关配置 情况一(使用的工具是 vue-cil) 如果是用 vue-cli 创建的项目,则项目目录中没有 config 文件夹,所以我们需要自建一个配置文件:在根目录 src 下创建文件 vue.config.js,需注意文件名称必须是 vue.config.js,然后在文件中插入以下代码: //打包配置文件 module.exports = { assetsDir: 'static

  • 详解Vue项目部署遇到的问题及解决方案

    写在前面 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.example/#/hello,hash 的值为 #/hello.特点:hash 虽然出现 URL 中,但不会被包含在 HTTP 请求中,对后端不会产生什么影响,改变 URL 不会重载页面. history:利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState()

  • 详解VUE项目中安装和使用vant组件

    Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件 单元测试覆盖率超过 90% 完善的中英文文档和示例 支持babel-plugin-import 支持 TypeScript 支持 SSR 组件中文文档地址:https://youzan.github.io/vant/#/zh-CN/intro 1.创建VUE项目之后进入项目目录运行安装命令: npm i vant -S 2.安装 babel-pl

  • 详解Vue项目中实现锚点定位

    详解Vue项目中实现锚点定位

    背景 今天在开发限时练-提分加项目的时候,有一个需要锚点定位的需求,而在Vue项目中,使用传统的在a标签的href属性中写id的方法无效,会导致浏览器的地址改变从而跳转到其他页面. 解决 最终参考vue2.0中怎么做锚点定位改问题下的回答实现了效果. <template> <div class="score-preview-container"> <div class="content-box"> <div class=&q

  • 详解vue项目打包步骤

    详解vue项目打包步骤

    终端运行命令 npm run build 打包成功的标志与项目的改变,如下图: 点击index.html,通过浏览器运行,出现以下报错,如图: 那么应该如何修改呢? 具体步骤如下: 1.查看package.js文件的scripts命令 2.打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳转到index.js文件 3.其中dev是开发环境,build是构建版本,找到build下面的assetsPu

  • 详解vue项目构建与实战

    详解vue项目构建与实战

    前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易懂的API和数据绑定的功能也为其揽获了不少用户.本文主要讲解vue项目的构建与实战,因此不会太多涉及其API和语法部分,旨在帮助vue的入门级用户了解从零开始构建vue项目的步骤和方法. vue项目分类 首先,在构建一个vue项目之前我们需要了解vue项目的分类,这里我主要将其分为两类:(1)直接引入vue.js文件 (2)使用vue单文件组件 按以上两类来看,直接引入vue.js文件就像页

  • 详解Vue项目中出现Loading chunk {n} failed问题的解决方法

    最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败.但是这个问题的根本原因没有被找到,因为这个问题出现的偶然性太高了,而且有的手机上会出现,有的不会,用模拟器不会出现,用真机又会出现,不知道是网络原因还是webpack的bug.在github.stackoverflow等各种地方也找不到原因和解决方案,这是github上关于这个问题的讨论:Loading chu

随机推荐