Vue是一款非常流行的前端框架，它提供了很多優秀的特性和開發工具，但是在復雜的項目中，我們需要將Vue的工程配置進行分離管理，以便更方便的維護和協作。下面將會詳細介紹如何將Vue工程配置分離出來。

首先，我們需要創建一個新的文件夾，用于存放配置文件。在該文件夾中，我們可以創建多個不同的配置文件，比如開發環境配置、測試環境配置、生產環境配置等等。以開發環境配置為例，我們可以創建一個名為dev.js的文件，用于存放開發環境的配置信息。

module.exports = {
NODE_ENV: '"development"',
BASE_URL: '"http://localhost:8080"',
API_URL: '"http://localhost:3000/api"'
}

在配置文件中，我們可以設置一些常量，用來控制不同環境下的配置選項。在上述代碼中，我們設置了三個常量，分別是NODE_ENV、BASE_URL和API_URL。這些常量可以在Vue工程中直接使用。

為了讓Vue工程能夠使用這些配置信息，我們需要在webpack配置文件中進行相應的修改。在webpack.base.conf.js中，我們可以添加一個名為config的變量，用來引入我們的配置文件。

const config = require('../config/dev.js')
module.exports = {
...
}

接著，我們可以添加一些插件來讓webpack使用我們的配置信息。比如，在插件列表中，我們可以添加一個名為DefinePlugin的插件，用來定義一個全局變量，用來存放我們的配置信息。

const webpack = require('webpack')
module.exports = {
...
plugins: [
...
new webpack.DefinePlugin({
'process.env': config
})
]
}

最后，在Vue工程中，我們可以直接使用我們配置文件中定義的常量。比如，在Vue組件中，我們可以直接使用process.env.BASE_URL來獲取我們的應用程序的基礎URL。

export default {
data () {
return {
api_url: process.env.API_URL
}
},
...
}

通過上述的步驟，我們成功地將Vue工程的配置信息分離出來，并且可以在需要的時候進行修改。不僅減少了工程的維護難度，還可以加強代碼的可重用性和可擴展性。