webpack使用vue-moment-libs 在PC微信浏览器下显示空白

在chrome或者手机端,web应用显示正常,但在PC微信端不能显示,空白的。

通过测试IE9版本,也是显示空白的。

网络上说是PC微信浏览器不支持语法糖 ()=>{}  但是我看我这边是因为我使用了vue-moment-lib组件,这个组件生成的错误语句如下图

这个时候ES6的语法,IE9不支持,PC端也应该是IE9的内核。

最终解决:后来我是因为把moment改为了dayjs,所以解决了问题。

说说我是怎么定位到vue-moment-lib组件的锅的。

在IE中显示的错误是

点击保存的那行,定位到下图

【图3】

然后用chrome打开应用。

在source面板中找到Vendor.main.js文件。

点击图三的行数,因为chrome支持source-map,所以会调到源码的文件中,这样就可以看到是什么组件了。

另外

使用webpack babel-loade rule 指定include,包含这个组件的路径,应该是可以实现babel再次转换的(因为vue-moment-lib没有用babel生成好兼容dist代码,那就我们自己再次加工咯)

但是我没有用到正确的姿势,没能再次babel编译已编译的代码,下次有机还再研究。 我是想要不就去github迭代一个版本,添加上兼容。

原文地址:https://www.cnblogs.com/saving/p/10798014.html

时间: 2024-10-14 06:25:49

webpack使用vue-moment-libs 在PC微信浏览器下显示空白的相关文章

js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll

开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图: 网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法: $('body').on('touchmove', function (event) {event.preventDefault();}); or document.addEventListener('touchmove', function(e){e.preventDefault()}, fal

完美解决safari、微信浏览器下拉回弹效果。

完美解决safari.微信浏览器下拉回弹效果,只保留局部回弹效果. CSS代码 .box{ overflow: auto; -webkit-overflow-scrolling: touch; } HTML代码 <body class="box"> <div class="scroll" style="height:1500px"> </div> </body> JS代码 var overscrol

关于苹果手机中,微信浏览器下拉弹动的解决

/*ios微信浏览器上下滚动兼容性问题解决 end*/$(function () {//DOM文档加载完执行 wxScrollSolve(document.querySelector('.MainCon'));});function wxScrollSolve(scrollWrapObj) {//Scrollobj要滚动的内容外部包裹的容器对象 if(scrollWrapObj==""||scrollWrapObj==undefined||scrollWrapObj==null){ r

阻止微信浏览器下拉滑动效果(ios11.3 橡皮筋效果)

在升级到 ios11.3 系统后,发现之前阻止页面滚动的代码e.preventDefault代码失效了.于是自己折腾了一番,找到了解决办法,分享给大家. 一.前言 浏览器在移动端有一个默认触摸滚动的效果,让我们感触最深的莫过于微信浏览器里面,下拉时自带橡皮筋的效果. 然而在开发的时候我们经常需要阻止此效果. 在此先直接给一个方案,直接加上下面的代码即可: document.body.addEventListener('touchmove', function (e) { e.preventDef

Vue 2.0 项目在IE下显示空白

新写的项目在 IE浏览器显示空白 解释一: Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator.Generator.Set.Maps.Proxy.Reflect.Symbol.Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码. 举例来说,ES6在Array对象上新增了Array.from方法.Babel就不会转码这个方法.如果想让这个方法运行,必须使用babel-polyfill,为当前环

微信浏览器下拉黑边的终极解决方案---wScroollFix

开始 由于在开发微信页面的时候下拉黑边的情况很常见,有时候会比较影响体验,因此开发了wScrollFix库,用于隐藏微信下拉的黑边问题npm地址github地址 什么是黑边 相信很多在微信上面做网页开发的同学都会发现,当页面被划到顶部或者底部的时候,如果继续滑动,页面会被整个进行下滑,露出上面或者下面的黑底,黑底上面标明了当前访问页面的域名信息,黑边的作用也很明显,由于在微信内浏览器并没有像传统浏览器地址栏那样子的设计,为了在一定程度上面防止钓鱼网站,所以通过下拉显示域名信息,如下图Wechat

Vue在IE下显示空白问题

主要是IE对promise的支持不好,我也是搜索后解决的,主要参考这个网站https://babeljs.io/docs/usage/polyfill/ 安装 npm install --save babel-polyfill 在package.json中添加依赖, devDependencies:{ - "babel-polyfill": "^6.22.0" } 在app.vue中添加引用"import 'babel-polyfill'" 在w

html微信浏览器分享显示图片的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>demo</title> &

微信浏览器下提供的分享回调

<script type="text/javascript">         // 所有功能必须包含在 WeixinApi.ready 中进行 WeixinApi.ready(function(Api) {             // 隐藏右上角popup菜单入口             //Api.hideOptionMenu();             // 隐藏浏览器下方的工具栏             //Api.hideToolbar();