我需要为生产模式禁用 Vue.js devtools，但应该为开发模式启用它答案

【问题标题】：I need to disable Vue.js devtools for production mode but it should be enabled for development mode我需要为生产模式禁用 Vue.js devtools，但应该为开发模式启用它
【发布时间】：2021-07-09 14:30:39
【问题描述】：

我不希望我的用户使用 devtools 检查应用程序，因此我想在生产模式下禁用它。但我需要在本地/开发模式下使用它。我已经尝试了以下方法，但它不起作用。

我创建了带有变量VUE_APP_ROOT_API 的 .env 和 .env.production 文件

.env 文件

VUE_APP_ROOT_API=http://localhost

.env.production

VUE_APP_ROOT_API=https://prod.com

在webpack配置中，我在下面添加了

devtool: process.env.VUE_APP_ROOT_API === ‘PROD’ ? ‘source-map’ : ‘’

请帮帮我。

【问题讨论】：

devtool 配置错误地检查PROD，而您的环境设置http://localhost 或https://prod.com。配置应为devtool: process.env.VUE_APP_ROOT_API === 'http://localhost' ? 'source-map' : '' 或devtool: process.env.NODE_ENV === 'production' ? '' : 'source-map'。

标签： vue.js webpack config

【解决方案1】：

if (process.env.NODE_ENV === 'development') {
  devtools.connect(/* host, port */)
}

【讨论】：

您认为我在 env 文件中添加的内容正确吗？

【解决方案2】：

如果您使用vue-cli 生成您的 vue 项目，那么您无需执行任何操作，只需运行构建命令即可：

npm run build

或

yarn build

它将默认启用生产模式并禁用 vue 开发工具。文档在这里：https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-build

否则，只需按照此处所述将您的应用程序捆绑到生产模式：https://vuejs.org/v2/guide/deployment.html#With-Build-Tools

在这两种情况下都应该禁用开发工具

【讨论】：

我没有使用默认的 vue cli。我的项目是自定义设置。
然后只需创建一个生产版本，您就应该准备好了。无需额外代码vuejs.org/v2/guide/deployment.html#With-Build-Tools
是的，添加模式作为生产工作！但每次我都必须手动更改开发或生产模式。我正在寻找一种无需任何手动工作即可实现此目的的解决方案。如果你知道类似的事情，请告诉我。