Vue.js作为一种MVVM的JavaScript框架，大大提高了我们开发效率。Vue.js 拥有强大的组件化系统、性能卓越的渲染机制以及友好的API调用方式，成为了前端开发人员的最爱。在实际的开发中，我们需要将Vue应用打包成可部署在生产环境的文件。但是，在开发期间，我们也需要调试我们的Vue应用。接下来，我们就要看看如何在Vue打包过程中开启调试。

使用Vue打包工具vue-cli，是我们开发Vue应用的必备工具。在使用vue-cli进行Vue应用打包时，我们需要在config/prod.env.js文件中配置process.env.NODE_ENV变量值为“production”，然后在config/dev.env.js文件中配置process.env.NODE_ENV变量值为“development”，这样我们就能保证在打包后的生产环境中，可以尽可能地优化Vue应用性能。

// 在 config / prod.env.js 文件中的相关配置
module.exports = merge(prodEnv, {
NODE_ENV: '"production"'
})

在进行Vue应用的调试时，我们需要先不进行压缩和合并。也就是说，我们需要将Vue应用打包成非压缩的文件，在页面加载时引入这些文件，从而进行调试。在vue-cli中进行这种处理非常简单，我们只需要在config/index.js文件中设置build中的uglify为false， 将sourceMap设置为true即可实现非压缩文件的打包。

// 在 config / index.js 文件中的相关配置
build: {
...
uglify: false,
sourceMap: true,
...
}

在进行Vue应用的调试时，我们还需要确保开发者工具中的“安全内容”选项被禁用。因为该选项会阻止一些脚本的执行，包括我们Vue应用的一些脚本。在Google Chrome浏览器中开启开发者工具，然后选择“Security”选项卡，取消“安全内容”选项即可。

在我们调试好Vue应用后，我们需要将Vue应用进行压缩和合并，以提高其运行效率。在vue-cli中进行这个过程也非常简单，我们只需要将config/index.js文件中build中的uglify设置为true即可。此时，我们已经将Vue应用打包为可部署在生产环境中的文件。

// 在 config / index.js 文件中的相关配置
build: {
...
uglify: true,
...
}

综上，我们可以使用vue-cli进行Vue应用的打包、调试和部署。通过设置config文件中的相关参数，我们已经熟练掌握了Vue应用打包开启调试的所有技巧。愿这些技巧能够帮助我们开发出高效优秀的Vue应用！