第一种:由于把路由模式mode设置成history了,默认是hash。

解决方法:路由里边router/index.js路由配置里边默认模式是hash,如果你改成了history模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行 。如果非要使用history模式的话,需要你在服务端加一个覆盖所有的情况的候选资源:如果URL匹配不到任何静态资源,则应该返回一个index.html,这个页面就是你app依赖页面。

第二种:打包后的dist目录下的文件引用路径不对,会因找不到文件而报错导致白屏。

解决办法:修改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的。先看一下默认的路径。

build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'), // Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', /**
* Source Maps
*/ productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map', // Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}

assetsPublicPath默认的是  ‘/’  也就是根目录。而我们的index.html和static在同一级目录下面。  所以要改为  ‘./ ’;

如果还是报错,修改build/webpack.prod.conf.js文件下webpackConfig,在output属性中添加 publicPath:"./",重新运行打包。

output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

第三种:在项目中使用了es6的语法,一些浏览器不支持es6,造成编译错误不能解析而造成白屏

解决方法:

1. 安装 npm install --save-dev babel-preset-es2015

2. 安装 npm install --save-dev babel-preset-stage-3

3. 在项目根目录创建一个.babelrc文件  里面内容 最基本配置是:

{
// 此项指明,转码的规则
"presets": [
// env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并且设置amd,commonjs这样的模块化文件,不进行转码
["env", { "modules": false }],
// 下面这个是不同阶段出现的es语法,包含不同的转码插件
"stage-2"
],
// 下面这个选项是引用插件来处理代码的转换,transform-runtime用来处理全局函数和优化babel编译
"plugins": ["transform-runtime"],
// 下面指的是在生成的文件中,不产生注释
"comments": false,
// 下面这段是在特定的环境中所执行的转码规则,当环境变量是下面的test就会覆盖上面的设置
"env": {
// test 是提前设置的环境变量,如果没有设置BABEL_ENV则使用NODE_ENV,如果都没有设置默认就是development
"test": {
"presets": ["env", "stage-2"],
// instanbul是一个用来测试转码后代码的工具
"plugins": ["istanbul"]
}
}
}

然后重启npm run dev  你会发现,可以在其他低版本浏览器跑了,基本兼容所有浏览器,ie8以下除外。而且大多数的手机浏览器也ok。重新打包到正式环境也正常。

vue发布之后会出现白屏现象主要几种原因和解决办法的更多相关文章

  1. Android App 启动页(Splash)黑/白闪屏现象产生原因与解决办法(转)

    转载: Android App 启动页(Splash)黑/白闪屏现象产生原因与解决办法   首先感谢博主分享,本文作为学习记录 惊鸿一瞥 微信的启动页,相信大家都不陌生. 不知道大家有没有发现一个现象 ...

  2. 用C#绘图实现动画出现卡屏(运行慢)问题的解决办法

    原文:用C#绘图实现动画出现卡屏(运行慢)问题的解决办法 正在用C#做一个小游戏,需要用到动画,上次解决的问题是闪烁问题,用双缓冲技术.以为不会有什么问题了.后来当把图片全部绘制上去的时候依然出现了卡 ...

  3. eclipse中tomcat发布失败(Could not delete May be locked by another process)原因及解决办法

    在eclipse中tomcat发布项目时,偶尔出现了以下情况: publishing to tomcat v7.0 services at localhost has encountered a pr ...

  4. vue在html中出现{{}}原因及解决办法

    在刚开始接触vue的时候,我们都是直接用<script>引入vue.js使用.没有借助vue-cli脚手架来构建项目. 对于一个初学者来说,跟着文档慢慢搬砖,使用vue进行数据绑定. 记得 ...

  5. vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法

    vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法 在vue 里面<style scoped></style> 是为了让样式只影响本身自己组件的样式,不改变全 ...

  6. vue页面加载前显示{{代码}}的原因及解决办法

    进入正题,简单说说自己对html中出现{{}}的原因及解决办法: 这样写的话,就会出现{{}}一闪的情况: 原因:html的加载顺序: 解析html结构 -> 加载外部脚本和样式表文件 -> ...

  7. vue项目打包之后首页白屏的问题

    本地的vue项目在server端浏览没问题,但是执行npm run build 打包之后在本地预览是白屏. 解决方法 1.路径问题 在config文件夹中找到index.js打开把assetsPubl ...

  8. 解决Unity5+Vuforia+Network本地联机发布到Android上白屏的问题

    Unity5+Vuforia+Network本地联机,在Android下点击联机,然后识别模型就出现白屏,点击屏幕上相应位置的按钮(已白屏,但点击该看不见的按钮)还是能起作用,如跳转到其他场景正常. ...

  9. Android 跨进程启动Activity黑屏(白屏)的三种解决方案

    原文链接:http://www.cnblogs.com/feidu/p/8057012.html 当Android跨进程启动Activity时,过程界面很黑屏(白屏)短暂时间(几百毫秒?).当然从桌面 ...

随机推荐

  1. Win+Tab键实现自定义程序列表间的窗口切换

    程序是用AutoHotkey语言写的, 说明: 以自己使用频率的顺序在ExeList自定义的程序间切换 切换可以以所有窗口切换,也可以按程序组切换(比如在word窗口间切换) 程序组可以分别定义排除的 ...

  2. Qt 线程初识别

    Qt有两种多线程的方法,其中一种是继承QThread的run函数,另外一种是把一个继承于QObject的类转移到一个Thread里. 这里我使用的是继承的方法使用线程花一个"复杂" ...

  3. 【BZOJ2510】弱题

    题目大意 有\(M\)个球,一开始每个球均有一个初始标号,标号范围为\(1-N\)且为整数,标号为i的球有\(a_i\)个,并保证\(\sum a_i=M\). 每次操作等概率取出一个球(即取出每个球 ...

  4. 20165322 实验二《Java面向对象程序设计》实验报告

    实验二<Java面向对象程序设计>实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实 ...

  5. Gym - 101334E 多叉树遍历

    题意:给定一个字符串,求有多少种树与之对应,对应方式是,每次遍历左节点,没有了,就回溯: 分析:d[i,j] = sum(d[i+1,k-1],d[k,j]) (str[i]==str[k]); 坑点 ...

  6. 课堂笔记-------字符串类型string------练习

    字符串类型 一.string //打出s.时就会出现一堆的方框,要找不带箭头的(不带箭头的是我们现在可以用的到的),不要找带箭头的(带箭头的是扩展,现在还用不到) //不带箭头的都是对s的操作(动作和 ...

  7. [19/03/24-星期日] 容器_Collection(集合、容器)之List(表,有顺序可重复)

    一. 概念&方法 Collection 表示一组对象,它是集中.收集的意思.Collection接口的两个子接口是List.Set接口. 由于List.Set是Collection的子接口,意 ...

  8. 学习换脸:Switching Eds: Face swapping with Python, dlib, and OpenCV

    学习GitHub上比较火换脸博客,原英文版:https://matthewearl.github.io/2015/07/28/switching-eds-with-python/ 系统win10,x6 ...

  9. MVC学习二:Controller和View关系

    控制器(Controller)主要是定义方法和加载视图(View) 1.控制器中的Action方法返回值的类型ActionResult,string 2.控制器中Action方法接收浏览器参数方式: ...

  10. Spring知识点总结(五)Spring整合JDBC

     1. 回顾JDBC        a. java操作关系型数据的API.导入相关数据库的驱动包后可以通过JDBC提供的接口来操作数据库.        b. 实现JDBC的六个步骤          ...