本来没太想发布这篇文章，不过还是说说吧。

这几年来，只要是可以，在浏览器兼容上，我都是直接忽略掉IE和国产浏览器的，只要我有决定权的情况下，因为我早些年被IE调试折腾够了，知道那很没有意义。当然我也知道，很多国内的小伙伴没办法，没得选择，只要是客户的网站，你不得不给他们去调试各种奇葩的浏览器，好在这些年终归是好一些了，不像早些年连IE6都要兼容那么痛苦了。

那么今天要说的是，用laravel-mix编译出来的js文件，如果这期间你使用了vuejs，如果你用了一些ES6的一些新的语法，那么在IE和Edge上，肯定是各种报错的，就需要想办法去转换一下。

如果你自己熟悉babel和webpack相关的编译，那么可能这个不难。但是在laravel领地里，大部分人还都不那么擅长前端，大家更多需要依赖一些现成的laravel-mix插件，否则就感觉搞不定了。

这里需要提两个方案：

（一）laravel-mix-polyfill

这是一个laravel-mix的插件，你需要用npm或yarn安装一下：

npm install laravel-mix-polyfill --save-dev
// 或者
yarn add laravel-mix-polyfill --dev

然后你需要在你的webpack.mix.js文件里做类似的更改：

let mix = require('laravel-mix');

require('laravel-mix-polyfill');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .polyfill({
      enabled: true,
      useBuiltIns: "usage",
      targets: {"firefox": "50", "ie": 11}
   });

比较关键的是，其中的targets: {"firefox": "50", "ie": 11}，自行改上你需要兼容的ie版本。

但是，这个方案在我自己的测试中没有成功，还是有些不能解决的问题，但这个方案毕竟偏官方一些，所以介绍出来，大家进行尝试，将你们的测试结果留言发布出来，供更多人参考。

如果你想着查看和调试它的更多选项，可以到它的官网上看一下：//laravel-mix.com/extensions/polyfill

（二）targets-webpack-plugin

这个也是类似的道理，但是我实测有效，是目前在用的。

第一步也是装一下组件：

yarn add targets-webpack-plugin -D

然后，在你的webpack.mix.js文件里做类似的更改：

const TargetsPlugin = require('targets-webpack-plugin')

...

mix.webpackConfig({
  plugins: [
    new TargetsPlugin({
      browsers: ['last 2 versions', 'chrome >= 41', 'IE 11'],
    }),
  ]
})

这样IE 11就可以兼容了，你也可以改成IE 10，如果你的终端用户还有大量IE10的话。

当然在实际中，你也不需要每次编译的时候，都做转换，这样会导致npm run dev的时间增长，可以加个判断，只在生产环境做js转换：

const TargetsPlugin = require(‘targets-webpack-plugin’)
…
if (mix.inProduction()) {

	mix.webpackConfig({
		plugins: [
			new TargetsPlugin({
				browsers: [‘last 2 versions’, ‘chrome >= 41’, ‘IE 11’],
			})
		]
	})
}

好了，大概这样，希望能帮到你