如何检查 Vue 是否处于开发模式？

Question

当我运行我的 Vue 应用程序时，控制台显示：

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

所以现在我想通过以下方式从我的模板中检查 Vue 是否正在开发中：

console.log("mode is " + process.env.NODE_ENV)

但这只会记录undefined 有没有其他方法可以在 Vue 中找到 NODE_ENV？

我的 webpack 配置有这部分：

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

也许相关：我使用打字稿，所以我包含了这个类型声明：

declare var process: {
    env: {
        NODE_ENV: string
    }
}

Answer 1

绝对最简单的解决方案是从您的 Vue 组件中检查 window.location。看起来像这样：

if (window.location.href === 'YOUR DEVELOPMENT URL') {
    //preset form values here
}

Answer 2

如果您从 vue-cli（默认 webpack）开始，那么这应该可以工作：

  connection: process.env.NODE_ENV === 'development'
    ? 'ws://localhost:5000'
    : 'wss://myawsomeproject.org'

Answer 3

Webpack 几乎用于我所有的 Vue 项目，所以我检查一下webpackHotUpdate 是否存在。

 if (webpackHotUpdate) {
      console.log('In Dev Mode');
 }

如果 webpack 开发服务器正在运行，它会出现在 window 对象中。

Answer 4

我通常使用：

if(window.location.href.indexOf("localhost") >= 0) {
  // Development mode    
}

或者：

if(window.location.href.indexOf("localhost") < 0) {
  // Production mode    
}

只需搜索开发 URL 的一部分，例如 localhost，您就不需要对地址的其余部分如此具体。这适用于您项目中的任何位置，不像 process.env.NODE_ENV 那样在 index.html 文件中不起作用。

Answer 5

尝试使用 .env 文件。

您可以通过将以下文件放入您的 项目根目录：

.env # 在所有情况下都已加载 .env.local # 已加载 在所有情况下，都会被 git 忽略。 .env.[mode] # 只加载 指定模式 .env.[mode].local # 只在指定模式下加载， 被 git 忽略

加

环境加载优先级

特定模式（例如 .env.production）的 env 文件将占用 比通用的优先级更高（例如 .env）。

文档：https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

Answer 6

对于我使用 pug 并且只想有条件地向组件添加一些元素的特殊情况，我在我的 pug-plain-loader 中设置了 options.data 属性 webpack.config.js 使得加载程序如下所示：

{
  resourceQuery: /^\?vue/,
  use: [
    {
      loader: 'pug-plain-loader',
      options: {
          // Use whatever you'd use to detect mode in the webpack config
          data: { mode: process.env['PRODUCTION'] ? 'production' : 'development' },
        },
      },
    ],
  },
}

这是我正在使用的完整 webpack.config.js：https://github.com/SuperuserLabs/thankful/blob/5913d9d0bb02e6d2f3b88c541477dc557caa4148/webpack.config.js#L76-L88

之后我可以这样做：

if mode === 'development'
  | Only shown in development mode

对于一般情况，这比我最初预期的要难。尽管擅长 Webpack 的人可能很容易做到这一点。

Answer 7

我知道这是一个老问题，但它可能有助于新的 VueJS 用户了解我在当前版本的 Vue (3.11) 中找到的这个解决方案：

在开发模式下运行时属性Vue.config.devtools 为true，在生产模式下为false！

Answer 8

使用.env 文件是设置在很多堆栈中使用的环境变量的常用方法。在 Vue 中使用它是有意义的，而不是试图重新发明轮子。

这里有一个小测试，它将显示您有哪些条件和选项。

使用以下命令构建您的项目：

vue-cli-service build

.env 文件：

#.env
NODE_ENV=development
DDD=development
VUE_APP_NODE_ENV=development

Vue 组件：

mounted() {
    console.log(process.env.NODE_ENV); // OUTPUT: production
    console.log(process.env.DDD); // OUTPUT: undefined
    console.log(process.env.VUE_APP_NODE_ENV); // OUTPUT: development
},

NODE_ENV 由vue-cli-service 设置。您可以拥有多个.env 文件并使用vue-cli-service build --mode staging 到run different configurations。

在构建过程中使用了环境变量，在组件代码中使用了客户端环境变量。所以你不能在你的客户端代码中使用DDD这样的东西，因为Vue会忽略它。

您可以创建自己的环境变量以 VUE_APP_ 为前缀，并在您的客户端代码中使用它们进行任何检查。 Docs ref。 VUE_APP_NODE_ENV 在我们的测试中可以正常工作。

注意

解析您的网址不是最佳选择。如果你使用类似window.location.href.indexOf("localhost") 的东西，它不适用于127.0.0.1。有几次我不得不在 FQDN 上运行该项目，而这个检查也对它不起作用。

Answer 9

这是 Vue 检查是否处于开发模式的方式：

if (process.env.NODE_ENV !== 'production' &&
  process.env.NODE_ENV !== 'test' &&
  typeof console !== 'undefined'
)

来源：GitHub

注意：我从代码中删除了检查config.productionTip !== false，因为即使Vue在开发模式下运行，它也仅用于关闭“生产提示”。

Gene Parcellano's answer 只要你使用 Webpack 就可以很好地工作，但是这个可能会更健壮一些。

编辑：

这样组合两个答案很容易：

if (
  window.webpackHotUpdate || (
    process.env.NODE_ENV !== "production" &&
    process.env.NODE_ENV !== "test" &&
    typeof console !== "undefined"
  )
)