如何检查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
    })
  ])
}

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

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

Answer 1

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

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

Answer 2

Webpack几乎用于我的所有Vue项目,因此我检查是否webpackHotUpdate存在.

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

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

Answer 3

对于Vue 3和Vite项目，请从项目中的任何js或文件中使用它：vue

console.log(import.meta.env.DEV)
console.log(import.meta.env.PROD)

返回boolean value，具体取决于您的环境。

Answer 4

使用.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运行不同的配置。

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

您可以创建自己的以 VUE_APP_ 为前缀的环境变量，并在客户端代码中使用它们进行任何检查。文档参考。 VUE_APP_NODE_ENV在我们的测试中会工作得很好。

笔记

解析您的网址并不是最好的选择。如果你使用这样的东西window.location.href.indexOf("localhost")，它将不起作用127.0.0.1。有几次我不得不在 FQDN 上运行该项目，并且此检查也不起作用。

Answer 5

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

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

Answer 6

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

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