vue在开发环境怎么兼容ie_vue 配置兼容ie浏览器

您现在的位置是：网站首页>>前端技术>>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