4、修改 vue.config.js
默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来。
依赖较多,索性将所有的依赖都加上,不过会增加打包后的体积,比如我的项目从7.5M增加到了19.6M
module.exports = {
transpileDependencies: process.env.NODE_ENV === "development" ? ["*"] : [],
另外,如果是babel-polyfill
+ webpack.config.js网上很多文章都是说这个的,可以参看:
https://github.com/PanJiaChen/vue-element-admin/wiki
- Vue CLI浏览器兼容性
- Vue CLI 3 配置兼容IE10
- vue cli3 创建的项目在IE11中运行,出现白屏,通过console调试发现报错SCRIPT1003: 缺少 ':'文件: app.js,行: 7391,列: 3 #4131
一、问题描述Vue CLI3打包上线后的代码使用IE11打开后是空白的,控制台报错:SCRIPT1003: 缺少 ':'app.js (304501,83045)其他浏览器打开没问题,问题定位在:存在不兼容IE的代码二、问题分析首先要知道,IE不支持函数简写data(){ return {}}只能识别这种形式 data: function () { return {}}还有其他的不兼容之处,最笨的办法是手动修改所有不兼容的地方当然还有更优的解看下配置文件pac
最近项目进入到了第三方集成的环节,集成第三方监控非要用IE,咋办?老板让我将后台管理系统的框架兼容下IE,一直都是在chrome下开发的,也不知道IE下是什么鬼。
目前后台管理系统前端搭建方式
目前系统是用vue-cli@2.0生成的,UI框架使用的是iview,ajax请求使用的是axois,此外就没有什么特殊的npm包了。
需要解决的兼容问题
经过自己的一番测试,目前主要有以下的兼容问题:
在IE下由于没有promise,所以axios不能用了;
在涉及到flex、fixed、absolute定位时,IE浏览器下的显示效果有较大的区别;
excel表单导出异常;
部分使用的
刚写好的项目在谷歌能打开,ie打不开,需要处理兼容问题
先根据这篇文章修改 详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
如果没有其他问题是可以了的,下面是我代码中出现的其他问题导致页面无法显示或者报错
sockjs报错
控制台会一直报这个错,sockjs-node 是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。
服务端:sockjs-node(https://github.com/sockjs/sockjs-node)
客户端:sockjs-clien(https://github.co
此时页面一片空白
报错原因
Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等新的对象或者方法。
例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。为了解决这个问题,我们使用一种叫做 Polyfill(代码填充,也可译作兼容性补丁)的技术。
简单的说,兼容问题一般是IE 对于es6 的部分新对象、表达式,语法并不支持,解决方案是使用 babel-poly
代码可以在360浏览器上的极速模式下正确显示,但是在兼容模式下页面不能正常显示。代码编程主要用的是Vue框架。
SCRIPT1003: 缺少 ':'
因为IE浏览器对代码的编程要求较高,所以要兼容IE浏览器尽量不要缩写,1003报错定位发现是一个函数简写了,将函数定义补充完整,就不再报错了。
beforeDestroy(){} //原代码
beforeDestory:function(){} //修改后代码
对代码进行如上修后不再报1003错误了,但是一直弹出某个函数未被定义,定位到该函数该函数定
当时的情况是IE浏览器在登录系统时,登录页无法加载,页面显示空白,所以也无法访问系统里的其他页面。
2 查看报错
在IE浏览器中输入系统网址,打开控制台,发现有这样的报错:SCRIPT1003: 缺少 ':'
第一个想法就是需要对webpack进行一些兼容性配置,于是小编低下头默默的先进行了一通通用配置操作。
3 进行通用兼容性配置
由于本系统前端框架用到的脚手架是3.x版本,因此得针对cli3来进行配置。
3.1 对v
vue.config.js 里面有一个针对node_modules里面的插件转码的字段
transpileDependencies: ['multi-download']
这个字段可以针对性对node_modules里面的特定内容进行转码,数组里面放的就是需要转码的插件
如果遇见部分es6语法无法转es5或者promise async/await 等方法无法转码,则需要安装babel-polyf...
最近公司项目使用服务端渲染,使用nuxt,运行在ie11上报错,提示没有from属性或者方法;这是由于ie浏览器不支持Array.from导致的。
需要使用babel-polyfill,直接上代码:
package.json
"dependencies": {
"babel-polyfill": "^6.26.0",
"babel-preset-stage-3": "^6.24...
你在初始化Vue 3时遇到了一个错误,错误信息是"Initialize failed: invalid dom"。这个错误通常是由于在Vue实例化过程中传递了无效的DOM元素引起的。
请确保你在实例化Vue时传递了正确的DOM元素作为挂载点。检查你的代码,确认传递的DOM元素是否存在,并且与Vue实例挂载点的选择器匹配。
另外,Vue 3对于挂载点有一些新的要求。Vue 3不再支持使用body或html作为挂载点,而是要求使用一个具体的DOM元素。确保你的挂载点符合这些要求。
如果你可以提供更多的代码和错误信息,我可以更具体地帮助你解决这个问题。