前端时间用vue做了一个提交申请单的功能，客户开始是说要兼容IE，IE可以之后，又说要兼容到IE8。可vue官网直接说了不兼容IE8，可真是让人头大。
 
没办法，谁让客户是上帝呢，只能想办法解决了，经过各种百度，最终决定用avalon2去解决。
 
在这里我就贴一些修改基础，不贴代码告诉大家怎么做了，就把需要用的参考文档贴出来，方便大家查阅吧。
 
 
 
 
new vue ----------->avalon.define
 
 
el:----------->$id
 
 
id='xxx'----------->ms-controller='xxx'
 
 
v-model----------->ms-duplex
 
 
v-for----------->ms-for
 
 
v-show----------->ms-attr-visivle
 
 
v-if----------->ms-if
 
 
:style----------->ms-css
 
 
:disabled-----------> ms-attr-disabled
 
 
:checked ----------->ms-attr-checked
 
 
https://www.cnblogs.com/rubylouvre/p/3181291.html#top10https://www.cnblogs.com/rubylouvre/p/3181291.html#top10https://www.cnblogs.com/rubylouvre/p/3181291.html#top10https://www.bootcdn.cn/avalon.js/https://www.bootcdn.cn/avalon.js/https://www.bootcdn.cn/avalon.js/http://avalonjs.github.io/index2.html#home.htmlhttp://avalonjs.github.io/index2.html#home.htmlhttp://avalonjs.github.io/index2.html#home.htmlhttps://www.cnblogs.com/vajoy/p/4063824.htmlhttps://www.cnblogs.com/vajoy/p/4063824.htmlhttps://www.cnblogs.com/vajoy/p/4063824.html

使用的是vue-typescript-admin-template项目（vue-cli3脚手架搭建）进行改造的，但在IE11下面出现各种语法错误，下面将解决方法记录下来，供大家参考。
 
下面是错误截图：
 
语法错误：
 
 
Promise 错误
 
 
polyfill
 
默认的Vue CLI项目会使用@vue/babel-preset-app，它通过@bable/preset-env和browserslist配置来决定项目需要的polyfill。
 
默认情况下，它会把useBuiltIns: 'usage' 传递给@bable/preset-env，这样它会根据源代码中出现的语言特性自动检测需要的 polyfill。这确保了最终包里 polyfill 数量的最小化。然而，这也意味着如果其中一个依赖需要特殊的 polyfill，默认情况下 Babel 无法将其检测出来。
 
 
直接照Vue CLi浏览器兼容性中上解决方法：
 
第一步：在babel的相关配置文件（babel.config.js、.babelrc 或package.json 的babel字段任意一个）中， 增加
 
"useBuiltIns": "entry"
 
注：babel7版本以后，会有差异 (https://babeljs.io/docs/en/babel-polyfill/)
 
下面我们配置.babelrc文件：
 
{
    "presets": [
      [
        "@babel/preset-env",
        {
          "useBuiltIns": "entry"
        }
      ]
    ]
  }
 
第二步： 安装'@babel/polyfill'，并在入口文件main.js中引入
 
npm install --save @babel/polyfill
 
 
引入的话官网推荐使用：
 
import "core-js/stable";
import "regenerator-runtime/runtime";
 
最后重新启动项目，应该可以解决IE11问题。
 
如果还是不行可以在vue.config.js中配置transpileDependencies，默认情况下babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在 transpileDependencies 选项中列出来。
 
如果项目中使用了CSS var()， IE11是不兼容的，我们可以使用css-vars-ponyfill
 
npm install --save css-vars-ponyfill
 
在main.js中引入即可：
 
import cssVars from 'css-vars-ponyfill'
cssVars({})
 
 
 
参考资料：
 
https://cli.vuejs.org/zh/guide/browser-compatibility.html#usebuiltins-usage
 
https://zhuanlan.zhihu.com/p/103907934
 
 

一、背景
 
因为项目中一些功能用到了IE的ocx组件部分，必须在IE环境下运行，按正常vue支持来说，IE8+应该是支持的，可能ES6写法需要进行兼容，我的项目就是在IE中无法打开，空白，也报一些 未定义什么的错误。
 为了解决这个问题，开始查找尝试，我的环境是IE11.
 
二、解决方法
 
1、安装babel-polyfill，由于尝试好多次不成功 我的项目里面还安装了es6-promise，估计不安装也没什么问题，安装方法如下：
 
npm install --save babel-polyfill
npm install --save es6-promise //（可以不用安装）
 
2、main文件中进行引入
 
import 'babel-polyfill'
import promise from 'es6-promise' //（这个也可以不用引入）
promise.polyfill() //（这个也可以不用引入）
 
3、babel.config.js文件配置useBuiltIns
 
module.exports = {
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry'
      }
    ]
  ],
};
 
4、vue.config.js配置transpileDependencies，转译依赖
 配置完以上三个如果能兼容，就不用配置了，如果发现一些 未定义，或者缺少什么符号之类的，找到报错的文件位置对应的依赖名称，添加到transpileDependencies中即可。
 我的这个提示缺少‘）’。
 定位错误如下
 
 
 
transpileDependencies: ["resize-detector"],
 
完成以上步骤基本就可以实现兼容IE高版本了。
 **
 
三、注意的问题点
 
**
 1、测试环境是IE11.
 2、transpileDependencies增加了报错的包名，如果多个报错的包名，目前没测试，本项目中增加resize-detector包名以后，其他的错误全部消失，如果transpileDependencies:[]全部忽略的话会报错。
 3、在main.js中引入import 'babel-polyfill’时需注意真正的包名和路径，之前我一直用import 'babel/polyfill’结果一直报错，最后发现自己的包名是babel-polyfill。
 

 
您现在的位置是：网站首页>>前端技术>>Vue
 
vue 配置兼容ie浏览器
 
发布时间：2018-11-26 10:39:46作者：wangjian浏览量：843点赞量：0
 
vue框架使用了ES6,然而ie浏览器不支持ES6语法,导致使用vue搭建的项目在ie浏览器上面无法运行，这里解决vue框架兼容ie(9+)浏览器问题
 
1：安装babel-polyfill(解决ie不支持promise对象的问题)npm install --save-dev babel-polyfill
 
2：使用babel-polyfill插件
 
在main.js文件的第一行引入babel-polyfill(这里注意第一行引入)import "babel-polyfill"
 
引入成功后,如果项目还不可以在ie浏览器上正常运行的话,可能是项目中安装了babel-preset-es2015和babel-preset-stage-*,在网上查到的资料大部分安装的是babel-preset-stage-2,然而我的项目安装的项目是babel-preset-stage-3,
 
3:配置babel-preset-es2015和babel-preset-stage-*
 
(1)在.babelrc里面进行配置{
 
"presets": ["stage-3","es2015"],  #如果安装的是babel-preset-stage-2使用stage-2
 
"plugins": ["transform-vue-jsx", "transform-runtime"]
 
}
 
(2):配置webpack.base.config.js
 
在module里配置需要进行编译的文件夹(如下)module:{
 
rules:[
 
{
 
test: /\.js$/,
 
loader: 'babel-loader',
 
include: [
 
resolve('../src'), resolve('../config'),
 
resolve('../libs'), resolve('../node_modules/iview')
 
],
 
query: {
 
presets: ['es2015']
 
}
 
},
 
]
 
}
 
重新运行项目,这时候发现报错
 
Module build failed: ReferenceError: Unknown plugin "transform-vue-jsx"
 
这是由于webpack无法解析vue-jsx的语法问题
 
解决：
 
安装依赖 [babel-plugin-transform-vue-jsx][1]npm install\
 
babel-plugin-syntax-jsx\
 
babel-plugin-transform-vue-jsx\
 
babel-helper-vue-jsx-merge-props\
 
--save-dev
 
到此vue配置兼容ie(9+)浏览器问题完美解决
 

 
0
 
+1