解决前后端不分离IE浏览器ES6兼容性问题

最新推荐文章于 2024-05-04 10:22:02 发布
最新推荐文章于 2024-05-04 10:22:02 发布
阅读量1.1k 收藏 4
点赞数 1
文章标签： js html javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43952253/article/details/109443053
版权

今天偶尔发现了 Vue + elementUI 项目在360浏览器的兼容模式下报错的情况，因为是刚开始学习接触Vue时的项目，所以没有完全做成前后端分离的模式，只是在html页面中以<script>标签的形式使用。
于是在IE浏览器或者使用IE内核的浏览器（如360浏览器兼容模式等）中会出现如下问题
在这里插入图片描述查找资料后发现原因是IE浏览器不支持ES6语法导致报错。浏览一些论坛也都是关于前后端分离的兼容性问题解决办法，对于这个项目不适用。下面是我解决前后端不分离的情况使用的办法，两者原理是一样的。

1 下载babel模块

这个可以通过npm很容易下载到，随便找一个文件夹

输入：npm install babel-core@5

很容易在下载的文件夹下找到这两个文件，并将这两个文件复制放入你的项目中。
在这里插入图片描述

2 在项目中安顺序引入

然后在你发现兼容性有问题的页面中引入
<script src="../browser.js" type="text/javascript"></script>
<script src="../browser-polyfi

最低0.47元/天 解锁文章
Storm_J
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
IE兼容ES6解决办法。。。。。。。。。。。
09-03
完美解决前端开发IE兼容问题。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
解决ES6兼容性问题
07-24
这些特性使得代码更加简洁、易读，但也带来了对旧环境的不兼容性。 2. **Babel转译器** 为了解决ES6的浏览器兼容性问题，开发者通常会使用工具如[Babel](https://babeljs.io/)。Babel是一个广泛使用的JavaScript...
IE11版本兼容性问题（若依框架-v2）
looklookhairline的博客
11-30 985
本文为在处理ie11兼容问题时碰到的坑
ES6的语法兼容IE浏览器
Rockandrollman的博客
07-31 885
请尝试以上修改，并确认是否解决了问题。如果还有其他报错，请提供具体的错误信息，我会尽力帮助你解决。这段代码在IE浏览器中可能会报错，因为箭头函数、模板字符串以及模板字符串中的变量插入是ES6的语法，旧版本的IE浏览器不支持。以上修改后的代码应该能够在IE浏览器中正常执行了。如果还有其他报错，请提供详细的错误信息，我将尽力帮助你解决问题。为了解决这个问题，你可以将箭头函数改写为普通的匿名函数，将模板字符串改为字符串拼接的方式。这是因为在旧版本的IE浏览器中，不支持ES6中的扩展操作符。你可以尝试将代码中的。
浏览器中不能使用ES6的扩展语法...报错
最新发布
Keep trying, keep going
05-04 481
，包括Chrome、Firefox、Safari和Edge等。浏览器大多数已经支持ES6（ECMAScript 2015）的扩展语法（
解决前后端不分离时IE浏览器对es6语法的兼容
qq_22188085的博客
11-15 690
1：先下载babel模块 cnpm install babel-core@5 下载完成后在路径:node_modules\babel-core下找到两个文件 browser.js和browser-polyfill.js 2:在项目中安顺序引入 并在项目中安顺序引入，如下： <script src="../utils/browser.js" type="text/javascript"&gt...
es6兼容ie
darkCloudss的博客
11-13 213
1、在引入其他js文件前引入以下两个文件 2、用到es6代码的script标签，添加type=“text/babel”
ES6兼容IE方法
熊宗的博客
06-28 902
尝试步骤： 1、项目中引入入browser.min.js。 2、在JS文件标签中加入type="text/babel"例如：<script type="text/babel" src="js/index.js"></script> 另外，window.onload这个函数在IE11以下也不生效！
ES6语法在IE的兼容解决
EStringDoggi的博客
03-17 3452
起因： 使用vue遍历渲染数据，在IE下无法渲染 问题发现： 使用了for of遍历和箭头函数等ES6语法不支持IE 解决方法： 分两步： （1）引入browser.min.js （2）将需要使用ES6语法的script标签的type属性设为’text/babel’ &lt;script type='text/babel'&gt; ...
解决ie浏览器不兼容ES6的js文件browser-polyfill.min.js
08-17
解决ie浏览器不兼容ES6的js文件browser-polyfill.min.js
完美解决axios在ie下的兼容性问题
08-27
然而，由于`axios`依赖于Promise，而Promise在IE浏览器（尤其是IE8及以下版本）中并未原生支持，这导致了在Internet Explorer（IE）下运行`axios`时可能会出现兼容性问题。本文将详细介绍如何解决`axios`在IE下的...
快速解决Vue项目在IE浏览器中显示空白的问题
12-08
总的来说，解决Vue项目在IE浏览器中显示空白的问题，关键在于确保项目中的现代JavaScript代码能够被老旧浏览器理解并执行。通过引入`babel-polyfill`和其它必要的垫片库，我们可以使Vue项目在更广泛的浏览器环境中...
IE11 兼容 ES6，可适配VUE.js
09-21
在引入其他脚本前先引入browser.min.js。 script标签的type的值设为text/babel。 <script type="text/javascript" src="./babel/browser.min.js"></script> ...在页面引入browser-polyfill脚本： ...
ie浏览器等兼容es6
WanweI897的博客
11-03 1940
我们的页面要兼容ie时会发现ie不能使用es6的内容，可以使用 browser 和 browser-polyfill 两个插件让ie支持es6，同时要将script标签的type改为"text/babel" <script src="../static/plugin/browser.min.js"></script> <script src="../static/plugin/browser-polyfill.min.js"></script> <scr
项目兼容ie8技术要点
热门推荐
云_飞扬
07-17 1万+
好久没有写博客了，因为最近公司项目要调ie8兼容，一直在忙这事，终于竣工了，跟大家分享下这老掉牙的浏览器是如何搞定的。。。欢迎大家指教 项目是使用的jeecg框架，后台使用的java,前端页面使用了bootStrap,jquery,easyui框架，页面是jsp+less+js，还用到了好多html5的新标记以及CSS3的新属性以及媒体查询。由于当时做项目时没有考虑ie8，所以改的过程中遇到了好...
RuoYI不兼容IE报错
qq_26843541的博客
10-13 1811
ruoyi 框架 IE兼容 jscencrypt socket-js
若依开源系统兼容IE问题
qq_40295815的博客
09-20 1030
node自带的sockjs版本过高导致的。
如何解决IE不兼容ES6:使用Babel 引入browser-polyfill.min.js和browser.min.js
学习 记录 总结 分享
02-07 3274
abel 默认只转换新的 JavaScript 句法，而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。为了解决这个问题，我们使用一种叫做 Polyfill（代码填充，也可译作兼容性补丁） 的技术。例如：1.新的变量声明方式 let/const 2.箭头函数 3.模板字符串 4.函数默认参数 5.展开运算符等基础语法。
Vue2+Webpack+ES6 兼容低版本浏览器（IE）
u013659786的博客
07-16 510
Vue2+Webpack+ES6 兼容低版本浏览器（IE） 1.解决方式：安装 “babel-polyfill” 1.1命令：npm install --save-dev babel-polyfill 1.2在入口main.js文件引入：import ‘babel-polyfill’ 1.3在build文件夹下找到webpack.base.conf.js.修改入口方式： entry: {...
vuex与ie浏览器的兼容性问题
12-14
根据提供的引用内容可以得知Vuex在IE浏览器上的兼容性问题主要是因为IE浏览器不支持ES6的语法，而Vuex是基于ES6的语法开发的。因此，在IE浏览器上使用Vuex时，需要进行一些兼容性处理。 解决Vuex与IE浏览器的兼容性问题，可以采用以下两种方法： 1.使用Babel进行代码转换：Babel是一个广泛使用的JavaScript编译器，可以将ES6代码转换为ES5代码，从而实现在IE浏览器上的兼容性。在使用Vuex时，可以通过Babel将Vuex的ES6代码转换为ES5代码，从而实现在IE浏览器上的兼容性。 2.使用Vuex的CDN链接：如果不想使用Babel进行代码转换，也可以直接使用Vuex的CDN链接。在使用Vuex时，可以通过引入Vuex的CDN链接，从而实现在IE浏览器上的兼容性。 下面是使用Babel进行代码转换的示例代码： ```javascript // 安装Babel npm install --save-dev babel-core babel-loader babel-preset-env // webpack.config.js module.exports = { module: { rules: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['env'] } } } ] } } ``` ```javascript // 在main.js中引入babel-polyfill import 'babel-polyfill' import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ // ... }) ``` 使用CDN链接的示例代码： ```html <!-- 引入Vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 引入Vuex.js --> <script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js"></script> <script> const store = new Vuex.Store({ // ... }) </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值