vuebabel的简单介绍

本篇文章给大家谈谈vuebabel，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue项目适配IE浏览器（跟我一起复制粘贴即可）
• 2、vue cli3-IE浏览器-babel-polyfill
• 3、vue 项目在ie浏览器的兼容问题
• 4、Vue - vant安装(引用babel-plugin-import实现自动按需引入组件)
• 5、vue项目编译不支持es11

vue项目适配IE浏览器（跟我一起复制粘贴即可）

这两天被IE适配折磨的头大。特此写下血泪乱掘顷贴，为各位提供解决方案。

我做了一个大屏的vue项目，布到线上之后，可在chrome及火狐等常规浏览器正常查看，但在IE浏览器打开显示一片空白。

而客户那边的机顶盒是使用IE浏览器，且无法修改默认浏览器，这就涉及到关于IE适配的问题。

IE无法显示主要有以下几个原因：

1、IE不支持es6的语法；

2、vue项目只能支持IE9及散卖以上版本；

3、若使用了第三方插件库，需在babel-loader中配置相关信息

1、哗陆引入 babel-polyfill；

2、在main.js最顶部引入，保证全局覆盖；

3、在webpack.base.conf.js中

A、修改entry配置，搜索该关键词定位；

B、修改babel-loader配置，我的项目用到了element-ui跟 v-charts，故做如下修改：

4、在.babelrc中修改：

[img]

vue cli3-IE浏览器-babel-polyfill

题主的项目应用常规的vue-cli3构建项目，睁槐在兼容IE浏览器时遇到的问题，做一下记录。

IE 11版本浏览器不简早让支持ES6百分之85%的语法规范，在vue项目中选择使用babel-polyfill兼容语法。

这里尽可能在首行引入；注意一下node_module中polyfill的文件路径，有的可能是 import '@babel/polyfill' 这种情况。

配置内容如下：

链拦局式webpack配置函数

vue 项目在ie浏览器的兼容问题

一、关于babel-polyfill

1、说液亏卜明：This will emulate a full ES2015+ environment and is intended to be used in an application rather than a library/tool. This polyfill is automatically loaded when using babel-node.（模拟ES2015以上的环闹穗境，主要用于对ES6新语法不支持的浏览器）；

2、安装： npm install --save babel-polyfill；

3、配置： module.exports = { entry: ["babel-polyfill", "./src/main.js"] };

4、main.js中配置： import 'babel-polyfill' //放在最顶部，确保全面加载。

二、关于es6-promise

1、说明：若在项目中使用了ES6 promise对象，它在Chrome、Safari浏览器下可以正常运行，但在360兼容模式、IE内核中不支持；

2、安装： npm install es6-promise；

3、配置：在main.js中加入 require('es6-promise').polyfill() ，用于在node或浏览器中支持ES6 与CommonJS。

三、步骤详细图

1、index引入这句话或者这三句话

2、执行 npm install --save babel-polyfill；

执行完上面语句package.json里面就有了这个依赖（检查2部是否执行完成的一个结果）

3、最上面引入，确保加载进去。

4、修改entery里面的内容改成下图那样

四、问题如图：

当空前把这些攻略都做了一遍后，发现打包完的360的急速模式可以了（本地运行还是不可以），但是！！！ie浏览器，360兼容模式，不管打包还是没打包，都不能显示，完全没有加载进去数据，如下图

并且还报错以下未定的错

（1）、

查询后发现，是因为IE没有这个方法，不支持sessionStorage，解决的方法是：IE本地调试用cookie，或者用webstrom打开项目，但我确实用的webstorm打开的项目，还是不可以，后来找到解决方法， 要把es6转es5 ！

然后， npm run dev ，居然可以了适配了。

Vue - vant安装(引用babel-plugin-import实现自动按需引入组件)

以Vant 为例：烂轮

首先安装vant

安装 babel-plugin-import 插件搭扰

也可以通过图形饥枝信化界面安装

vue项目编译不支持es11

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的迟毁禅 ECMAScript 5 特性。但对于 IE9+，Vue 底层是支持。

由于开发过程中，我们经常会使用一些第三方插件或组件，对于这些组件，有时我们需要做一些处理。下述主要阐述如何使用 vue-cli3 脚手架搭建的工程支持 IE11。

现象

IE11 打开 Vue 工余芦程（Vue CLI）构建而来出现空白页，控制台告警、报错。

如：

DOM7011: 此页上的代码禁用了反向和正向缓存

HTML1300：进行了导航

app.js 各种语法错误

browserslist

项目中 package.json 文码尘件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

@babel/preset-env：将你使用最新 JavaScript 语法，灵活的转化为目标浏览器所支持的 polyfill。

Autoprefixer：PostCSS 插件，为浏览器增加前缀。

.browserslistrc

1%

last 2 versions

not ie 11

Polyfill

默认的 Vue CLI 项目会使用 @vue/babel-preset-app，它通过 @babel/preset-env 和 browserslist 配置来决定项目需要的 polyfill。

默认情况下，它会把 useBuiltIns: 'usage' 传递给 @babel/preset-env，这样它会根据源代码中出现的语言特性自动检测需要的 polyfill。这确保了最终包里 polyfill 数量的最小化。然而，这也意味着如果其中一个依赖需要特殊的 polyfill，默认情况下 Babel 无法将其检测出来。

关于vuebabel和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。