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

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

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


1.npm run build打包页面空白

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

解决位置: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中出现空白页面的情况大概也就就上面这些了,如何遇到其他情况,欢迎留言讨论总结。

vue中修改Modal的重置功能怎么写?

工作中遇到弹出模态框形式的修改功能,模态框里面是Form表单,Form表单中的内容是从后台获取的,这时候用户修改完没有提交,而是想重置然后重新修改,怎么办呢?

详细分析Vue.nextTick()实现

刚开始接触Vue的时候,哇nextTick好强,咋就在这里面写就是dom更新之后,当时连什么macrotask、microtask都不知道(如果你也不是很清楚,推荐点这里去看一下,也有助于你更好地理解本文),再后来,写的多了看得多了愈发膨胀了,就想看看这个nextTick到底是咋实现的

vue混入

混入是一种分发Vue组件中可复用功能非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。

Vue基础之计算属性

设想一个场景,你需要得到一个复杂运算/逻辑的返回值,利用模板内的表达又过长且难以阅读和维护,这时计算属性就可以很好的解决你的问题。看下面的例子:

vue 自定义指令

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。但有一些是没有相对应的指令进行操作。在这里以progress(h5的新标签进度条)为例,向大家介绍Vue的一个用于指令扩展的方法:directive(自定义指令)。

对Vue.js的认知

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。

谈谈vue的render函数?

使用vue 这么长时间,对vue 对源码了解还是不多,作为一个不甘平庸的前端小白,决定奋起,那么今天我们就来谈谈vue 的render 函数;打开源码,我发现render 函数返回一个VNode; 可是我们并未在模版中写render 呀,这又是一个什么样的过程呢?

Vue的href动态拼接绑定

:href前面要加“:”或者v-bind: 字符串要用单引号“ \\\'\\\' ”包住 加上了冒号是为了动态绑定数据,等号后面可以写变量。 如果不使用冒号,等号后面就可以写字符串等原始类型数据。这是就无法进行动态绑定数据了

vue项目中vux的使用

VUX 是基于 WeUI 和 Vue.js 的 移动端 UI 组件库,提供丰富的组件满足移动端(微信)页面常用业务需求。在vue-cli中使用步骤如下:vux2必须配合vux-loader使用,并配置build/webpack.base.conf.js

当使用vue的按键修饰符不起效果的时候怎么办?如@keyup.enter

但是问题是:如果我们使用第三方组件这个方法并不奏效了 这时我们应该这么写 )注意:这是我们必须在@keyup.enter后面加一个native 来确保这个功能能够得到实现

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

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全