Webpack 使用 NODE_ENV=production 编译 vue 仍然会导致开发警告答案

【问题标题】：Webpack compiling vue with NODE_ENV=production still results in dev warningWebpack 使用 NODE_ENV=production 编译 vue 仍然会导致开发警告
【发布时间】：2017-05-16 19:36:00
【问题描述】：

我在下面针对 vue.js 前端运行了一个非常简单的 webpack 配置。 bundle.js 已编译，但仍会产生“您正在以开发模式运行 Vue”警告。我遵循了here 指定的建议，但它并没有改变任何东西。

有什么想法吗？

这是我的 webpack.config.js：

var webpack = require('webpack')

module.exports = {
entry: './www/src/js/main.js',
output: {
  path: "./www/static/js",
  filename: "bundle.js"
},
plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: '"production"'
  }
}),
new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
})
],
module: {
  loaders: [
    {
      test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/
    },
    {
      test: /\.vue$/,
      loader: 'vue'
    }
  ]
},
vue: {
  loaders: {
    js: 'babel'
  }
}
}

【问题讨论】：

标签： webpack vue.js

【解决方案1】：

您使用的是哪个版本的 Vue？如果是 Vue 2.1.0 或更高版本，请检查此答案：

您可能使用的是vue.js 文件而不是vue.common.js 文件。

对于直接使用，您应该将vue.js 用于开发，将vue.min.js 用于生产。这两个文件的环境分别硬编码为“开发”和“生产”。

对于 WebPack，您应该改用 vue.common.js 文件，因为它将处理 process.env.NODE_ENV 变量。为此，在你的 webpack 文件中添加一个别名属性：

module.exports = {
  ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  ...
}

【讨论】：

你说得对，谢谢。已更新我的答案。不确定为什么硬编码有意义，但肯定有充分的理由。
因为有人可以在没有 Node 或没有 WebPack/Browserify 的情况下使用该库。例如，有人可能只是通过 CDN 包含 JS 库，那么 NODE_ENV 变量就会被破坏。
如果您使用 SimulatedGREG/electron-vue，这正是您需要更改的设置！

【解决方案2】：

问题是我在做什么：

import Vue from 'vue/dist/vue.js'

代替：

import Vue from 'vue/dist/vue.common.js'

差异是第一个被硬编码到 dev 这就是为什么警告等不会被删除的原因。

【讨论】：

这两个导入是相同的。看起来其中一个是错误的;-)

【解决方案3】：

如果您使用的是 OSX(Unix) || Linux

export NODE_ENV=production

Windows 用户应设置 NODE_ENV 使用

set NODE_ENV=production

您确定设置了 NODE_ENV 变量吗？检查一下。

echo $NODE_ENV

【讨论】：