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

TypeScript Vue.js

Harry伽罗

2020-03-13

当我运行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
    }
}

第1550篇《如何检查Vue是否处于开发模式？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
乐米亚 2020.03.13

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

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

猪猪GO 2020.03.13

尝试使用.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

木嘢 2020.03.13

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

注意

解析网址不是最佳选择。如果您使用这样的东西window.location.href.indexOf("localhost")，它将无法正常工作127.0.0.1。有几次，我必须在FQDN上运行该项目，并且此检查将无法继续进行。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android