vue项目兼容ie11的实现方法

目录
  • 前情提要
  • 经过(一)
  • 经过(二)
  • 经过(三)
  • 经过(四)
  • 最后
  • 附加
  • 总结

前情提要

事情的起因是项目在设计之初要求兼容IE11，也在开发之初对此做了处理，但在经过两年的多的迭代后，经过大几十个人的手之后，该项目被引入了大量的插件，又由于不经常使用IE浏览器导致不知道什么时候项目就已经不兼容IE11了。但是领导是使用IE浏览器的，突然哪天翻看项目网页的时候，打不开了。于是从上头被骂了，我们被要求将手上所有的项目都对IE11以及其他市面上的浏览器做兼容处理。

经过(一)

对于Chrome浏览器没啥好说的，是目前对开发者最有好的浏览器，但是IE11就不干了，撂挑子了。经过多个浏览器的测试，发现就IE浏览器不行，连首屏都加载失败。

经过(二)

在本地启动项目后，然后打开IE的开发者控制台，会发现报了语法错误，

然后告诉你是哪个文件的哪一行。点进去一看，没错，都是经过webpack编译压缩后的代码，看的头昏眼花。 （可能你遇到的问题所报的文件和行数列数跟我的不一样，但是原因都是一样的，后面会讲。）

经过(三)

经过一系列的排查和定位，最终发现了问题。上面这个问题的原因是sockjs-client这个插件里使用了非ES5的语法，导致IE浏览器无法解析，所以报了语法错误。这个时候有人该骂了，webpack的babel不就是将非ES5的语法转成ES5语法的吗，你到底懂不懂，到底不会不会？对啊，不是有babel转译嘛，为啥还会报语法错误？原来这是因为webpack默认不会对node_modules中的插件进行转译，需要在vue.config.js中进行配置。该属性名叫：transpileDependencies，接收一个数组作为属性值，然后把node_modules中需要babel转译的插件名输入进去，就可以了。

module.exports = {
    ...
    transpileDenpendencies: [ 'sockjs-client' ]
}

经过(四)

处理完上面的问题之后大多数情况下，问题就已经解决了，但是比较神奇的是有的时候还是不行，那是因为还有一个地方需要坐下修改，那就是.browserslistrc文件中的：not dead 改成：not ie <= 11

  • 问题：这个文件有啥用呢？

    • 单独这个文件是没有用的。
    • 但是他会配合@babel/preset-env和Autoprefixer用来确定需要转译的Javascript特性和需要添加的css浏览器前缀

最后

除了上述的问题，还遇到了一个问题，那就是加密插件引起的：jsencrypt。引入的方式有两种： - import JSEncrypt from 'jsencrypt' - import { JSEncrypt } from 'jsencrypt' 第一种方式IE不兼容，第二种IE是兼容的。

附加

在对一个vue2+ts的项目中发现vue-property-decorator插件也是使用了非ES5语法导致IE11无法兼容。

总结

其实上面的sockjs-client一般情况下只会在本地出现，因为本地启动的服务本质是启动的socket服务，而发布到线上的代码是经过打包后的代码，跟socketjs-client不发生关系，除非你项目中用到了webSocket

到此这篇关于vue项目兼容ie11的实现方法的文章就介绍到这了,更多相关vue项目兼容ie11内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue+iview 兼容IE11浏览器的实现方法

    最近在搞一个基于vue的后台管理系统兼容IE浏览器,眼泪都要掉下来.后来和产品说了,同意兼容IE11,感动得我眼泪啊 这里也就是记录一下我遇到的超级烦的bug 首先是'babel-polyfill' 和 "autoprefixer-loader" 这个不用多说,资源一大堆 然后 打包之后一直  const  去不掉,查了之后是 webpack 有 webpack-dev 不支持IE低版本了,要把 webpack 版本往下调,我是拒绝的 1.IE  new Date() 失败 new D

  • VueCli3中兼容IE11配置的艰苦历程

    目录 当前项目前端版本 解决步骤 由于目前项目是采用VueCli3 搭建的项目,对google,火狐.eage .360等浏览器兼容不错,但是对IE确出现了问题,目前项目要上线,那个着急啊,花了将近两天的时间从网上那个度娘,必应啊,但还好最终还是完美解决了. 现在对自己这两天的辛苦做个总结,也当是记录一下自己的感悟. 当前项目前端版本 package.json { "name": "vue-antd-pro", "version": "

  • vue项目兼容ie11的实现方法

    vue项目兼容ie11的实现方法

    目录 前情提要 经过(一) 经过(二) 经过(三) 经过(四) 最后 附加 总结 前情提要 事情的起因是项目在设计之初要求兼容IE11,也在开发之初对此做了处理,但在经过两年的多的迭代后,经过大几十个人的手之后,该项目被引入了大量的插件,又由于不经常使用IE浏览器导致不知道什么时候项目就已经不兼容IE11了.但是领导是使用IE浏览器的,突然哪天翻看项目网页的时候,打不开了.于是从上头被骂了,我们被要求将手上所有的项目都对IE11以及其他市面上的浏览器做兼容处理. 经过(一) 对于Chrome浏览

  • VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决

    问题现象 项目使用vue/cli3脚手架搭建的前端项目,vue版本为2.6.10. browserslist的配置如下: [ "> 1%", "last 2 versions"] 但开发环境的IE11打开显示白屏,F12打开显示: 分析过程 5306行显示 "./node_modules/_debug@4.1.1@debug/src/browser.js"这个路径报错,由于eval()包含的代码中有ES6的语法,IE不支持,查了网上很多资料

  • Vue 项目中Echarts 5使用方法详解

    Vue 项目中Echarts 5使用方法详解

    目录 前言 创建项目 基本使用 安装 使用方法 柱状图 动态排序柱状图 前言 Echarts 是一个纯JavaScript的图表库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表. 创建项目 先使用vue-cli创建一个新的项目,配置按照自己的需要选择,默认的也可 vue create vue_echarts cd vue_echarts npm run serve 基本使用 安装 首先安装echarts npm i

  • Vue项目中设置背景图片方法

    在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: background:url("../../assets/head.jpg"); 这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题: 1.在data中定义如下: export default { name: 'productdetailspage', data() {

  • webpack vue项目开发环境局域网访问方法

    思路:将自己的项目启动ip与端口固定,当然端口也可以为默认的8080 步骤: 1.查看自己在局域网内的ip 命令行 ipconfig 2.回到自己的开发目录,在根目录找到comfig/index.js 修改 host: 自己的局域网ip 修改 port: 自定义端口-最好不要用80或者其他常用端口 示例:comfig/index.js host:'http://192.168.2.153',//一定要加上 http port:3000 注意:此处ip一旦固定,本机访问的或localhost将不可

  • vue项目引入字体.ttf的方法

    1.下载所需要的字体,.ttf格式本文以(FZCYJ.ttf 为例) 2.在src下新建common文件,文件夹中包含以下文件 3.打开font.css @font-face { font-family: 'FZCYJ'; //重命名字体名 src: url('FZCYJ.ttf'); //引入字体 font-weight: normal; font-style: normal; } 4.配置webpack.base.conf.js 文件 5.App.vue引入字体 6.可在body中设置字体

  • Vue项目引进ElementUI组件的方法

    环境要求 Nodejs Nodejs 官网下载地址:http://nodejs.cn/download/具体安装参考其他资料 打开cmd命令行,输入npm -v,如果出现如下图的显示,说明已经安装正确. 如果安装版本比较老,想升级新版本 npm install npm -g 安装 webpack 安装webpack npm install webpack -g -g 表示安装为全局 安装 vue-cli 安装 vue 脚手架项目初始化工具 vue-cli npm install vue-cli

  • vue init webpack 建vue项目报错的解决方法

    使用vue init webpack 创建vue项目时报如下错误: vue init webpack my-project C:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.args[0] ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet s

  • vue学习笔记五：在vue项目里面使用引入公共方法详解

    今天早上来到公司,没事看了一下别人的博客,然后试了一下,发现的确是可以的,在此记录一下,方便自己日后查阅. 首先新建一个文件夹:commonFunction ,然后在里面建立 一个文件common.js 建立好之后,在main.js里面引入这个公共方法 最后是调用这个公共方法 测试一下,我在公共方法里面写了一个简单的一段代码如下: export default{ login:function(){ console.log("1111"); } } 如何在我的login.vue里面控制台

  • vue项目中的webpack-dev-sever配置方法

    问题描述:在vue项目中运行npm run dev启动服务器,然而在同一个局域网下的外部设备不能该服务器 解决方案:在项目的config文件夹下找到index .js中的host把默认的localhost更改为0.0.0.0, 然后外部设备就可以访问该项目启动的服务了(注意必须是在统一局域网下) 以上这篇vue项目中的webpack-dev-sever配置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

随机推荐