Vue: Vue with Webpack : You are running Vue in development mode when building my app

[ozee31]

Vue.js version

2.2.1

Reproduction Link

Steps to reproduce

System: Ubuntu 16
Node: 6.10.0
npm: 3.10.10
Webpack: 1.14.0

I build my application whith cmd npm run build

What is Expected?

I do not want to see the debug message on browser console

What is actually happening?

In browser console i have :
"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"

build code

build.js

// https://github.com/shelljs/shelljs
require('./check-versions')()
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')

cp(path.resolve(__dirname, '../src/config/prod/*'), path.resolve(__dirname, '../src/config/'))

console.log(
  '  Tip:\n' +
  '  Built files are meant to be served over an HTTP server.\n' +
  '  Opening index.html over file:// won\'t work.\n'
)

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

var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
rm('-rf', assetsPath)
mkdir('-p', assetsPath)
cp('-R', 'static/*', assetsPath)

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

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 = process.env.NODE_ENV === 'testing'
  ? require('../config/test.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/en/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: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : 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

webpack.base.conf.js

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')

var env = process.env.NODE_ENV
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
    filename: '[name].js'
  },
  resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'vue$': 'vue/dist/vue',
      'libs': path.resolve(__dirname, '../libs'),
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'api': path.resolve(__dirname, '../src/api'),
      'components': path.resolve(__dirname, '../src/components'),
      'config': path.resolve(__dirname, '../src/config'),
      'utilities': path.resolve(__dirname, '../src/utilities')
    }
  },
  resolveLoader: {
    fallback: [path.join(__dirname, '../node_modules')]
  },
  module: {
    preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /(node_modules|libs)/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /(node_modules|libs)/
      }
    ],
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  eslint: {
    formatter: require('eslint-friendly-formatter')
  },
  vue: {
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
    postcss: [
      require('autoprefixer')({
        browsers: ['last 2 versions']
      })
    ]
  }
}

[fnlctrl]

Please See more tips at https://vuejs.org/guide/deployment.html

[LinusBorg]

https://vuejs.org/v2/api/#productionTip

[ozee31]

Tkt @LinusBorg because with NODE_ENV i have already the warning

[gaoqiankun]

@ozee31 This alias 'vue$': 'vue/dist/vue' cause the problem, use vue/dist/vue.min in production environment.

[martianmartian]

@gaoqiankun hi newbie here, how can you do that please?

[ericscottmarquez]

This is the most unhelpful thread ever. I have this problem and the webpack define plugin code input suggestion from the documentation does not say which file to put it in. This makes no sense.

[LinusBorg]

Well of course it doesn't tell you that, since Vue itself doesn't come with a webpack config, which means you could have written it any way you want and saved it anywhere you want.

If you don't know where your webpack config is or how to change it, you might have to learn about webpack.

If you know where it is, how about sharing that information with us and maybe we can give you a more specific tip?

[ericscottmarquez]

Well my issue is very strange and may be related to this... the vue component won’t mount on to the dom/view correctly in production mode yet development is fine. Using Heroku + Ruby on Rails+ the webpacker gem. Node Environment is set for development. The asset precompilation through Rails assets precompile command works. Webpacker is successfully compiling during development. Vue debugging is not detecting vue in production but it is on local dev. Package.json seems to be working fine with scripts. In this framework the webpack config is buried in the gem framework and has presets that are supposed to “just work” or something...
https://github.com/rails/webpacker
Will post the code in the morning when I wake up from likely yet another nightmare about a data-model-matrix abstraction being visualized in multidimensional space. Thanks for responding, I’ve been trying to get in contact with anyone for days now.

[LinusBorg]

I would kindly ask you to open a topic on forum.vuejs.org. I'm active there and we can pick up where we left from here.

A closed issue in the vue core repo is the wrong place for such a specific question.

[ericscottmarquez]

https://forum.vuejs.org/t/rails-webpacker-vuejs-production-mode-in-heroku-not-working/45926

On Mon, Oct 15, 2018 at 4:42 AM Thorsten Lünborg [e-mail]
wrote:

I would kindly ask you to open a topic on forum.vuejs.org. I'm active
there and we can pick up where we left from here.

A closed issue in the vue core repo is the wrong place for such a specific
question.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue/issues/5063#issuecomment-429798157, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AWLbn3Zilh1ugUn-XyXYsOG7roYemMOlks5ulGaWgaJpZM4MQwhL
.

[vcavallo]

Well my issue is very strange and may be related to this... the vue component won’t mount on to the dom/view correctly in production mode yet development is fine. Using Heroku + Ruby on Rails+ the webpacker gem. Node Environment is set for development. The asset precompilation through Rails assets precompile command works. Webpacker is successfully compiling during development. Vue debugging is not detecting vue in production but it is on local dev. Package.json seems to be working fine with scripts. In this framework the webpack config is buried in the gem framework and has presets that are supposed to “just work” or something...
https://github.com/rails/webpacker
Will post the code in the morning when I wake up from likely yet another nightmare about a data-model-matrix abstraction being visualized in multidimensional space. Thanks for responding, I’ve been trying to get in contact with anyone for days now.

I'm having the same issue @ericscottmarquez. Did you end up resolving it?

[ericscottmarquez]

Well guys since this issue, I split up my app and refactored everything, I put rails into api-mode and served json to a separate front end client made with pure whole-milk Nodejs. I used axios to make most requests and json web tokens for authentication and login-state management. Sorry I hope that course of action is do-able for some, it just made it easier on myself to separate the front and back end without the webpacker gem / node wrapper around rails.

[cawoodm]

As I understand it there is no way to suppress the warning during development unless we switch to vue.min.js ?

https://codepen.io/cawoodm/pen/gyaJBO - using vue.js with productionTip=false we get the warning.

https://codepen.io/cawoodm/pen/qwOGJJ - using vue.min.js we get no warning.

So why have a productionTip option (ostensibly to suppress the warning) if it's ignored? As developers we don't want the warning AND we don't want to work with minified libraries.

[BonBonSlick]

module.exports = {
    mode: 'production',
    entry: [
        './src/app.js',
    ],
...
    new webpack.DefinePlugin({
       'process.env': {
                NODE_ENV: '"production"',
            },
            'process.env.NODE_ENV': JSON.stringify('production'),
        }),
...
 resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            config: path.resolve(__dirname, '../config'),
            vue: 'vue/dist/vue.min.js',
        },
    },

Docs all the time outdated.

But anyway ERROR...

I removed production env, single prod file, only this way it worked for me. Seems something wrong with loading config in webpack.