13

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://v2.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?

4
  • 1
    added Vue.config.productionTip = false, check Vue Guide: ProductionTip
    – Sphinx
    Jun 6, 2018 at 21:57
  • 2
    did you use vue cli to init the project?
    – Prashant
    Jun 6, 2018 at 22:05
  • 1
    @Sphinx I know you can actively suppress it, but that shouldn't be necessary if you build it in production mode, right?
    – Yama
    Jun 7, 2018 at 6:34
  • @Prashant no, I didn't...
    – Yama
    Jun 7, 2018 at 6:43

1 Answer 1

31

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.

4
  • Note, simply renaming vue.js to vue.min.js does nothing to suppress the message: you have to switch to a minified vue.
    – Marc
    Apr 3, 2019 at 15:30
  • Why do we even need this alias? I didn't set up my project but this is the only package I have to import like this? Removing the alias breaks my application Nov 20, 2020 at 12:55
  • @HenryIng-Simmons The answer to your question is in the Github issue I referenced in my answer. Here's a comment to take a look at. github.com/vuejs/vue/issues/5063#issuecomment-283605691
    – rb-
    Nov 21, 2020 at 15:31
  • Thank you for posting this. That warning has been nagging me for ages. Even if I got the non-minified vue integrated in a pipeline that minifies it...
    – Nick M
    Nov 24, 2021 at 10:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.