首先，Vue單文件組件是非常方便的，但是在實際項目中，我們通常需要面對打包多個文件的情況。那么如何在Vue中打包多個文件呢？

打包多個文件有兩種方式，一種是使用Webpack的Code Splitting功能，將多個文件分成多個打包后的文件，另一種是使用Vue的異步組件功能，將多個組件按需加載。

使用Webpack的Code Splitting功能

Webpack的Code Splitting使用起來比較簡單，只需在webpack.config.js文件中配置即可。以下是一個簡單的例子：

module.exports = {
entry: {
app: './src/main.js',
vendor: './src/vendor.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
optimization: {
splitChunks: {
chunks: 'all',
name: 'vendor'
}
}
};

在這個例子中，我們配置了兩個entry，在output中使用了[name].js進行文件名的占位符，這個占位符將會被entry中的鍵名所替代。在optimization中，我們配置了splitChunks，這個選項會將所有的依賴模塊打包到一個名為vendor的文件中。

除了使用splitChunks之外，Webpack還提供了其他的Code Splitting方式。例如，使用import()來異步加載模塊：

import('./lazy-loaded.js')
.then(module =>{
// do something with the module
})
.catch(err =>{
// handle error
});

當我們打包這段代碼時，Webpack會將其分離成單獨的文件，在需要的時候才會去異步加載。

使用Vue的異步組件功能

使用Vue的異步組件功能也非常簡單，只需將組件定義為函數，當被引用時再進行加載。以下是一個簡單的例子：

Vue.component('my-component', function (resolve, reject) {
// 在這里進行異步請求
resolve({
template: '...'
});
});

在這個例子中，我們定義了一個異步組件my-component，當被引用時再執行異步請求，最終返回一個template字符串作為組件的模板。

除了使用函數來定義異步組件之外，Vue還提供了一種更加方便的方式——使用import函數：

Vue.component('my-component', () =>import('./my-component.vue'));

在這個例子中，我們使用了import函數來引入異步組件my-component.vue，在被引用時再進行加載。

總結

以上就是Vue中打包多個文件的兩種方式，如果你的項目需要打包多個文件，那么使用Webpack的Code Splitting或Vue的異步組件功能將會大大提高項目的性能和可維護性。