vue/cli2和cli3框架下bable解决es6语法不兼容问题,适用于ie11,ie10的项目兼容。
我们引用一些第三方插件的时候,经常会出现node_modules中的es6语法没有被转换导致报错,而且这样的报错往往比较奇怪,无法直观的根据报错信息查看原因。例如缺少“;”,“无法识别”,等乱起八糟的报错。此时一般是通过babel来解决。对于vue/cli2脚手架搭建的项目来说,babel其实已经引入了,.babelrc文件也已经创建好了。但是实际操作的过程中,我们还是需要进行一些配置。配置文件位
·
cli2框架支持ie的修改方案
我们引用一些第三方插件的时候,经常会出现node_modules中的es6语法没有被转换导致报错,而且这样的报错往往比较奇怪,无法直观的根据报错信息查看原因。
例如缺少“;”,“无法识别”,等乱起八糟的报错。
此时一般是通过babel来解决。
对于vue/cli2脚手架搭建的项目来说,babel其实已经引入了,.babelrc文件也已经创建好了。
但是实际操作的过程中,我们还是需要进行一些配置。
配置文件位置是 build/webpack.base.conf.js
然后找到module——rules
找到babel-loader,在include这一项中
照葫芦画瓢,增加你需要引入的第三方插件的位置
例如:
{
test: /\.js$/,
loader: "babel-loader",
include: [
resolve("src"),
resolve("test"),
resolve("node_modules/webpack-dev-server/client"),
resolve('node_modules/element-ui/src'),
resolve('node_modules/vue-easytable/libs'),
]
},
重新启动项目,这样就可以运行了 。
cli3框架支持ie的修改方案
node_modules里的依赖默认是不会编译的,会导致es6语法在ie中的语法报错,所以需要在vue.config.js中使用transpileDependencies属性配置node_modules中指定哪些文件夹或文件需要编译.
transpileDependencies: [
/[/\\]node_modules[/\\](.+?)?element-ui(.*)[/\\]src/,
/[/\\]node_modules[/\\](.+?)?element-ui(.*)[/\\]package/,
/[/\\]node_modules[/\\](.+?)?f-render(.*)/,
/[/\\]node_modules[/\\](.+?)?quill-image-drop-module(.*)/,
/[/\\]node_modules[/\\](.+?)?vue-ele-form(.*)/,
/[/\\]node_modules[/\\](.+?)?vue-ele-form-bmap(.*)/,
/[/\\]node_modules[/\\](.+?)?vue-baidu-map(.*)/,
/[/\\]node_modules[/\\](.+?)?vue-ele-upload-image(.*)/,
],
更多推荐
已为社区贡献24条内容
所有评论(0)