VueJS shows “development mode” message even with o

Question

I am having an issue getting VueJS2 (2.2.0) to run in production mode. The message "You are running Vue in development mode." always shows up in the console, even though I build it with webpack in production-mode. According to https://vuejs.org/v2/guide/deployment.html it should be enough to run webpack in production-mode and everything is getting minified, so webpack seems to 'know' that it is running in production mode, but vueJs doesn't play along.

My webpack config looks like this:

let webpack = require('webpack');
let path = require('path');

module.exports = {
  entry: {
    app: './src/app.js',
      vendor: ['vue', 'axios']
    },
  output: {
    path: path.resolve(__dirname, 'public/js'),
    filename: "[name].js",
    publicPath: './public',
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'initial',
          name: 'vendor',
          test: /[\\/]node_modules[\\/]/,
        }
      }
    }
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    }
  }
};

In order to build my minified files for production, I run:

webpack --mode=production --hide-modules

I also tried manually setting the NODE_ENV to "production" before running webpack (4.11.1), but with no difference...

What am I missing here?

Answer 1

When you set the alias vue/dist/vue.js, you're using a file that's always in development mode. Change your alias to vue/dist/vue.min.js and you'll be in production mode.

You could set your version of Vue to match your build environment. This example assumes that process.env.NODE_ENV is set to production for production builds, so you'd need to make sure that was indeed the case to use this example.

...
resolve: {
  alias: {
    vue: process.env.NODE_ENV == 'production' ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js'
  }
}

See this Github issue for reference.