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(.*)/,
    ],

Logo

前往低代码交流专区

更多推荐