每當我們使用 Vue.js 搭建一個網站或者應用程序時，運行到打包構建部分的時候，我們可能會遇到各種各樣的報錯，讓我們煩躁不已。其中一個常見的報錯就是“vue-cli-service build”報錯。接下來，讓我們來看一下這個報錯是如何產生的以及如何解決。

在使用 Vue CLI 3+ 來搭建項目時，我們通常會在終端運行命令 “npm run build” 或者 “yarn build” 來進行項目打包構建。這時候，我們可能會遇到“vue-cli-service build”報錯。這個報錯一般會出現在運行到打包前的生產環境構建的時候，而在開發環境下卻沒有問題。

$ npm run build
>my-app@0.1.0 build /Users/me/my-app
>vue-cli-service build
ERROR  Failed to compile with 1 errors  
error  in ./src/main.js
Module build failed (from ../node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/me/my-app/node_modules/babel-preset-preact/lib/index.js

上面的報錯信息表明，我們在使用 babel-loader 進行 ES6+ 語法轉譯時，出現了錯誤。在報錯信息的最后，它告訴我們這個錯誤是由 babel-preset-preact 插件導致的。

那么，我們該如何來解決這個問題呢？

解決這個問題的方法有多種。一種方法是卸載 babel-preset-preact 并使用其他插件替代它。還有一種方法是，我們可以安裝一個名為 babel-plugin-transform-export-extensions 的插件來解決這個問題，這個插件允許我們的插件導出對象和函數。

$ npm install --save-dev babel-plugin-transform-export-extensions

安裝好插件之后，我們還需要將它添加到 babel-loader 的配置選項中：

// babel.config.js
module.exports = {
presets: [
'@vue/app'
],
plugins: [
'transform-export-extensions'
]
}