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
    })
  ])
}

也许相关：我使用的是typescript，所以我包含了这种类型声明：

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

Answer 1

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

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

如果webpack dev服务器正在运行，它将出现在window对象中。

Answer 2

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

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

Answer 3

如果您从vue-cli（默认webpack）开始，那么这应该有效：

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

Answer 4

尝试使用.env文件。

您可以通过将以下文件放入环境变量来指定环境变量   项目根目录：

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

加

环境加载优先级

用于特定模式（例如.env.production）的环境文件将采用   优先级高于通用优先级（例如.env）。

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

Answer 5

对于我使用pug并且只想有条件地向组件中添加一些元素的特殊情况，我在options.data中设置了pug-plain-loader的{{1}}属性，使得加载程序看起来像以下：

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' }, }, }, ], }, }：https://github.com/SuperuserLabs/thankful/blob/5913d9d0bb02e6d2f3b88c541477dc557caa4148/webpack.config.js#L76-L88

之后我可以做：

webpack.config.js

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

Answer 6

我知道这是一个老问题，但对于新的VueJS用户来说，了解我在当前版本的Vue（3.11）中找到的解决方案可能会有所帮助：

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

Answer 7

使用.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 _ 前缀的env变量，并将其用于客户端代码中以进行任何检查。 Docs ref。 VUE_APP_NODE_ENV在我们的测试中可以正常工作。

注意

解析网址不是最佳选择。如果您使用类似window.location.href.indexOf("localhost")之类的内容，则不适用于127.0.0.1。有几次我必须在FQDN上运行该项目，并且此检查将无法继续进行。

Answer 8

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

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

来源：GitHub

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

只要您使用Webpack，

Gene Parcellano's answer都可以很好地工作，但是可能会更健壮。

编辑：

将两个答案结合起来很容易：

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

Answer 9

我通常使用：

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

或者：

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

只需搜索诸如localhost之类的一部分开发URL，您无需对地址的其余部分如此具体。它可以在项目中的任何地方工作，与process.env.NODE_ENV在index.html文件中无法工作的情况不同。

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

9 个答案: