vue 项目白屏解决方案
在做的项目是使用 vue-cli 脚手架为基础的,只能使用微信浏览器打开的。在某次更新功能代码后,被反馈在一些手机上会出现白屏。经过一番探索,多管齐下解决了问题
白屏可能的原因:
- es6 代码没有被编译成 es5 ;
- 文件打包路径错误;
- 运营商塞入的广告 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 ,完美解决。
原文地址:https://segmentfault.com/a/1190000016853748
vue 项目白屏解决方案的更多相关文章
- Vue解决项目白屏
第一步: vue-cli项目根目录下面新建Vue.config.js文件 proxy反向代理 module.exports = { devServer: { proxy: { ...
- Vue项目骨架屏注入实践
相比于早些年前后端代码紧密耦合.后端工程师还得写前端代码的时代,如今已发展到前后端分离,这种开发方式大大提升了前后端项目的可维护性与开发效率,让前后端工程师关注于自己的主业.然而在带来便利的同时,也带 ...
- Vue 项目骨架屏注入与实践
作为与用户联系最为密切的前端开发者,用户体验是最值得关注的问题.关于页面loading状态的展示,主流的主要有loading图和进度条两种.除此之外,越来越多的APP采用了“骨架屏”的方式去展示未加载 ...
- Ionic2使用百度地图API(JS)出现白屏解决方案
最近自学ionic2,写了一个内嵌百度地图JS的demo,实际跑起来之后出现了大家常见的白屏问题.. 最初的实现是这样的: 首先主页内嵌了一个百度地图插件 <div id="Bmap& ...
- 关于Flutter启动项目白屏,报错[ERROR:flutter/shell/gpu/gpu_surface_gl.cc(58)] Failed to setup Skia Gr context.问题的解决方案
首先,环境如下: 1.系统:windows10 64位 Android SDK version: 28.0.3 Flutter SDK: v1.5.4-hotfix.2 模拟器: 网易Mu ...
- vue项目首屏加载优化实战
问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vu ...
- vue项目中视频播放结束返回首页出现1秒左右的白屏问题
vue项目的性能优化问题,一直以来都是大家比较关注的. 近日负责的项目中,使用了SignalR实时通讯,客户端中点击发起播放视频的请求到服务器,服务器接到请求后再调用前端的播放视频方法,以此来达到播放 ...
- 记录下自己VUE项目用Hbuider打包后启动白屏问题
刚用VUE做项目,之前测试时vue创建的自身项目打包都是启动OK没问题.今天打包自己的时,启动一直白屏.折磨了好久,百度了一堆.终于找到了方法. 首先是在config/index.js里面 build ...
- vue项目使用hbuilder打包后,真机测试白屏
在命令行直接运行 npm run build后,生成的dist文件中,直接打开index.html文件 Tip: built files are meant to be served over an ...
随机推荐
- ES6入门教程---变量和常量
ES6提出了两个新的声明变量的命令:let 和 const 1. 建议不再使用var,而使用let 和const .优先使用const. 在定义之后值是固定不变的,即为常量 常量的值不能修改,但是如果 ...
- Luogu P1462 通往奥格瑞玛的道路 二分答案+最短路
先二分答案,再跑最短路,跑的时候遇到 过路费超过二分的答案的 就不拿他更新最短路 #include<cstdio> #include<iostream> #include< ...
- luogu P4145 上帝造题的七分钟2 / 花神游历各国 维护区间和&&区间开根号
因为开根号能使数字减小得非常快 所以开不了几次(6次?)很大的数就会变成1..... 所以我们可以维护区间最大值,若最大值>1,则继续递归子树,暴力修改叶节点,否则直接return (好像也可以 ...
- LINUX中IPTABLES防火墙使用
对于有公网IP的生产环境VPS,仅仅开放需要的端口,即采用ACL来控制IP和端口(Access Control List). 这里可以使用Linux防火墙netfilter的用户态工具 iptable ...
- 机器学习框架ML.NET学习笔记【8】目标检测(采用YOLO2模型)
一.概述 本篇文章介绍通过YOLO模型进行目标识别的应用,原始代码来源于:https://github.com/dotnet/machinelearning-samples 实现的功能是输入一张图片, ...
- go实现主线程等待子线程都运行完再退出
方式一 package main import ( "fmt" ) func main() { ch := make(chan struct{}) count := 2 // co ...
- Dubbo封装rest服务返回结果
由于Dubbo服务考虑到一个是给其他系统通过RPC调用,另外一个是提供HTTP协议本身系统的后台管理页面,因此Dubbo返回参数在rest返回的时候配置拦截器进行处理. 在拦截器中,对返回参数封装成如 ...
- springBoot jpa 表单关联查询
1.创建两个实体类 import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.per ...
- WinForm 窗体
Winform是.NET开发中对windows Form的一种称谓,form是窗体的意思,winform 称之为windows form. 一般中我们使用的东西分为 客户端.网页.APP 三大类. w ...
- HDU 4055 The King’s Ups and Downs(DP计数)
题意: 国王的士兵有n个,每个人的身高都不同,国王要将他们排列,必须一高一矮间隔进行,即其中的一个人必须同时高于(或低于)左边和右边.问可能的排列数.例子有1千个,但是最多只算到20个士兵,并且20个 ...