vue2.1.8 warning error, #4691

[BusyHe]

can i remove the error:

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

webpack.prod.conf.js

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var env = config.build.env

var webpackConfig = merge(baseWebpackConfig, {
  module: {
    loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
  },
  devtool: config.build.productionSourceMap ? '#source-map' : false,
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  vue: {
    loaders: utils.cssLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true
    })
  },
  plugins: [
    // http://vuejs.github.io/vue-loader/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    // extract css into its own file
    new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    })
  ]
})

if (config.build.productionGzip) {
  var CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

module.exports = webpackConfig

build.js

// https://github.com/shelljs/shelljs
require('shelljs/global')
env.NODE_ENV = 'production'

var path = require('path')
var config = require('../config')
var ora = require('ora')
var webpack = require('webpack')
var webpackConfig = require('./webpack.prod.conf')

var spinner = ora('building for production...')
spinner.start()

var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
rm('-rf', assetsPath)
mkdir('-p', assetsPath)

webpack(webpackConfig, function (err, stats) {
    if (err) throw err
    process.stdout.write(stats.toString({
                colors: true,
                modules: false,
                children: false,
                chunks: false,
                chunkModules: false
            }) + '\n')

    var indexPath = path.resolve(__dirname, '../dist/index.html')
    var newIndexPath = path.resolve(__dirname, '../templates')
    var newStaticPath = path.resolve(__dirname, '../static')
    rm('-rf', newIndexPath);
    rm('-rf', newStaticPath);
    mkdir('-p', newIndexPath)
    mkdir('-p', newStaticPath)
    mv(indexPath, newIndexPath)
    mv(assetsPath + '/*', newStaticPath)
    rm('-rf', config.build.assetsRoot);

    spinner.stop()
})

[BusyHe]

[ktsn]

This is not an error message. If you would like to suppress the message, just use minified build or build it as production mode.
Please read the link that the message refer to. https://vuejs.org/guide/deployment.html

[BusyHe]

i use vue-cli,take a good look at,when i update vue to 2.1.8, npm run build

[ktsn]

I can't reproduce with Vue v2.1.8 on latest webpack vue-cli template.
If you really think it's a bug, please report this to the repository of the template that you are using. If you just want some supports and ask questions, you should ask on forum or gitter.

[smallpath]

Same warning message here. I didn't do anything except upgrade vue fron 2.1.0 to 2.1.10. And the output in my webpack config is below which is supposed to be according to the doc

{ NODE_ENV: '"production"' }

I really don't know why there is warning message

[phiphou]

Same bug for me

[BusyHe]

I haven't solved the problem yet

[phiphou]

Resolved with :

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

instead of :

resolve: {
  alias: {
    ...,
    'vue$': 'vue/dist/vue'
  }
}

[BusyHe]

@phiphou 666,thanks

[phiphou]

@BusyHe U're welcome ;)

Note it also works with 'vue$': 'vue/dist/vue.min.js'.

Note sure about the difference between these two files but guess the first one is for dev and the second one for production.

Also note we could have "turn off the console log", as described in this thread on Stack Overflow.

[BusyHe]

@phiphou i use the first one，it's work normal ,thanks again

[narwajea]

@phiphou difference between those two files is explained here: https://github.com/vuejs/vue/blob/5300e717fa52480bf301453beabbd863eeff0d8c/dist/README.md

Hence your first solution is correct.

Browser build:
'vue$': 'vue/dist/vue.min.js'

CommonJS build, intended to be used with a Node-compatible bundler, e.g. Webpack or Browserify:
'vue$': 'vue/dist/vue.common.js'

[phiphou]

@narwajea Thanks for this useful explanation ;)

[le0zh0u]

It is not work for me. In the webpack.base.conf.js:
alias: { 'vue$': 'vue/dist/vue.common.js', 'src': resolve('src'), 'assets': resolve('src/assets'), 'components': resolve('src/components') }
In the prod.env.js:
module.exports = { NODE_ENV: '"production"' }
when webpack running, the value of process.env.NODE_ENV equals to production. But the value will equal to development when rendering the page.
How can I fix it? Thanks.

[narwajea]

Check the env value provided in the DefinePlugin in webpack.prod.conf.js:

new webpack.DefinePlugin({ 'process.env': env }),

You may find useful information here: https://vue-loader.vuejs.org/en/workflow/production.html