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

Posted 2023-02-22

【中文标题】Webpack 使用 NODE_ENV=production 编译 vue 仍然会导致开发警告

【英文标题】：Webpack compiling vue with NODE_ENV=production still results in dev warning

【发布时间】：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'
  

【参考方案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