为了将我们的Vue应用程序放在生产环境中，我们必须将我们的代码打包到一个或多个JavaScript文件中。这个过程被称为打包，通常使用工具如Webpack或Rollup来完成。

VUE在开发过程中提供了一个工具来实现快速原型开发和热加载，这对于开发者而言非常有用。然而，由于这种方式的缺陷是无法优化代码以获得更快的加载速度和更高的性能，因此它并不适合在生产环境中使用。因此，必须将Vue应用代码打包成一个或多个JavaScript文件并发布到生产环境中。

打包是将我们的应用程序转换为JavaScript的一种过程。打包工具会对我们的代码执行很多优化。例如，它们会将多个JavaScript文件合并成一个文件、压缩JavaScript代码、删除注释和其他无用的内容，以减少我们的应用程序的总文件大小，从而加快加载速度。

module.exports = {
//...
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};

在使用打包工具时，我们需要将所有Vue组件、自定义指令和过滤器编写为可以在JavaScript模块中导入的形式，并确保我们的JavaScript代码可以通过CommonJS或ES6模块系统进行导入和导出。例如：

// HelloWorld.vue
<template>
<div>Hello World!</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
message: 'Welcome to Vue.js!'
}
}
}
</script>

在以上示例中，我们将HelloWorld.vue组件导出为一个默认的ES6模块，使得webpack可以正确地对其进行编译。Webpack会根据main.js文件中的引用关系自动将所有依赖打包到bundle.js文件中。

需要注意的是，在使用webpack等打包工具时，我们应该针对不同的环境分别编写不同的webpack配置文件。例如，我们可以在开发环境中使用webpack-dev-server来实现热重新加载和其他开发时所需的功能，而在生产环境中使用uglifyjs-webpack-plugin等插件来对生成的代码进行压缩和优化。这种方式可以确保我们的应用程序在不同的环境中都可以获得最佳的性能和用户体验。

综上所述，Vue应用程序必须通过打包工具将所有Vue组件、自定义指令和过滤器编写为可以在JavaScript模块中导入的形式，并使用webpack等打包工具将其转换为一个或多个JavaScript文件。这样可以实现代码的优化和压缩，提高我们的应用程序的性能和用户体验。