最近，在使用Vue進行web開發時，我遇到了一個問題：Vue打包后在IE瀏覽器下運行報錯。

Syntax error
(function (exports, require, module, __filename, __dirname) { ...
Unexpected token '{'.

為什么會出現這個錯誤呢？經過我對問題的分析，發現是因為打包后的代碼中使用了ES6的語法，而IE瀏覽器并不支持ES6。

const foo = () =>{
console.log('hello world');
}

如上面的代碼所示，箭頭函數是ES6的語法之一，而IE瀏覽器對該語法并不支持。因此，當打包后的代碼運行在IE瀏覽器時，就會出現語法錯誤。

為了解決這個問題，我們可以使用Babel將ES6的語法轉換為ES5的語法。Babel是一個強大的工具，可以將我們寫的高級語言代碼轉化成瀏覽器可以識別的ES5語法。

npm install @babel/core babel-loader @babel/preset-env -D

安裝完babel和preset-env之后，我們需要將Babel添加到我們的webpack中：

module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
}

如上代碼所示，在webpack配置文件中加入Babel。

我們也可以在Babel options配置項中指定babel的targets，告訴babel我們的需求——對IE11提供支持：

module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
targets: {
"ie": "11"
},
useBuiltIns: 'usage'
}]
]
}
}
}
]
}
}

以上就是解決使用Vue打包IE報錯問題的解決方案，希望能幫助到大家。