关闭

vue框架开发出现页面空白、白屏的解决方法总汇

时间: 2017-12-27阅读: 33220标签: vue

使用vue开发过一段时间了,采用 vue-cli脚手架中出现一些页面空白问题的解决方法总汇


1.npm run build打包页面空白

我们会发现页面head中引用的jscss文件是出现了路径错误,这里修改如下:

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

build: {
    assetsPublicPath: './',
}


2. iOS的Safari下无法打开网页

webpack-dev-server >= 2.8.0 的版本在 iOS Safari 下无法打开网页,效果为白屏。 

控制台报错:Can't find variable: SockJS 应该是 Safari 的 BUG,比如下面的代码就会抛出 

Error eval("const a = function () {}; function b() { a(); }; b();")

解决方法

1.使用老版本:

yarn add webpack-dev-server@~2.7.0 -D

2.其它方法

yarn add babel-plugin-transform-es2015-block-scoping -D

修改 webpack 相关配置

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
    ...,
    /node_modules\/webpack-dev-server/
  ]
}


3.升级vue2+部分手机访问出现页面空白

npm run dev后可能出现无法加载到路由模板的信息。

解决位置:config/index.js文件:把 devtool: '#eval-source-map'  改为devtool:'inline-source-map'

dev: {
   devtool:'inline-source-map',
}


4.升级vue2+IP访问页面空白

默认只能通过localhost或者127.0.0.1才能访问,如果使用本机的Ip地址会出现无法访问到的情况。

解决位置:config/index.js文件:把config/index.js中“host” 配置为“0.0.0.0”就可以解决,或者设置为你电脑的IP地址也行:

dev: {
   host: '192.168.10.122', 
}


5.Vue在IE、低版本Android显示空白问题

这是由于IE对promise的支持不好,我们需要安装:babel-polyfill和es6-promise:

npm install babel-polyfill
npm install es6-promise

然后在main.js文件中引用:

import 'babel-polyfill'
import Vue from 'vue'
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()

最后 build/webpack.base.conf.js 文件中配置如下:

module.exports = {
     entry: {
     app: ["babel-polyfill", "./src/main.js"]
     }
};


6.Vue只在iOS 10出现白屏问题

a:出现变量定义两次的错误描述,如下:

SyntaxError: Cannot declare a let variable twice

原因是由于ios 10中Safari中错误描述如下:当你定义一个与参数同名的for循环迭代变量时,我们错误地认为这是一个语法错误。解决方法如下:

找到webpack.prod.conf.js文件,在UglifyPlugin的定义里添加关于mangle的选项

new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        },
        mangle: {
          safari10: true
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
}),

b:使用Swiper插件:这是由于Swiper插件中用到了ES6的语法a = b ** c,a是b的c次方,而iOS 10的Safari里不认识这样的语法,认为这是一个错误,所以你需要让Swiper经过babel的包装,而缺省状态下babel是不对node_modules里的模块进行编译的。解决方法是在项目根目录下新建一个文件vue.config.js,在里面添加如下语句:

module.exports = {
  chainWebpack: config => {
    config.rule('js').include.add(/node_modules\/(dom7|swiper)\/.*/)
  }
}


总结

vue中出现空白页面的情况大概也就就上面这些了,如何遇到其他情况,欢迎留言讨论总结。

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/287

关闭

Vue组件的三种调用方式

主要讲Vue三种方式调用组件:v-model或者.sync显式控制组件显示隐藏,通过js代码调用,通过Vue指令调用,在写组件的时候很多写法、灵感来自于element-ui

Vuejs讲解之:响应式、过渡效果、过渡状态

Vue是一套构建用户界面的JS渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。讲解js高级之响应式、过渡效果、过渡状态。

Vue中props知识点

如果你一直在阅读有关props内容,你会发现我们可能也一直在使用它们(即使没有意识到),但也许你并不完全确定它们是什么。或者如何正确使用它们,并充分利用它们。

Vue的理解:Vue.js新手入门指南

从一个从未接触过除HTML+CSS+JavaScript+JQuery以外的前端技术的人到现在可以独立使用Vue.js以及各种附属的UI库来开发项目,我总结了一些知识和经验想与大家分享。

vue 中 $set与$delete的使用

Vue无法检测property的添加或移除,由于Vue会在初始化实例时对property执行getter/setter转换,所以propterty必须在data对象上存在才能让Vue将它转换为响应式的。例如

Vue.js中 watch 的高级用法

上面的代码的效果是,当我们输入firstName后,wacth监听每次修改变化的新值,然后计算输出fullName。app.$watch调用后会返回一个值,就是unWatch方法,你要注销 watch 只要调用unWatch方法就可以了

vue2.0之监听属性的使用心得及搭配计算属性的使用

在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助

一点 Vue.observable 想法

Vue 2.6.0 新增了 Vue.observable api,但最近才去尝试使用它。这东西说新也不新,因为他就是 vue 本身的功能,只是暴露出来,成为新 api 了。在老版本中,直接用 new Vue({ data: {} }) 也一样。

Vue2实例详解与生命周期

Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。

关于Vue.use()使用详解

相信很多人在用Vue使用别人的组件时,会用到 Vue.use() 。例如:Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时,就不需要用 Vue.use(axios),就能直接使用。那这是为什么呐?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!