Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

VueJS shows "development mode" message even with on build in production-mode

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?

like image 912
Yama Avatar asked Jun 06 '18 21:06

Yama


People also ask

How do I run Vue project in production mode?

If we are using the full build i.e including Vue directly using the script tag without using a build tool, we should make sure we use the minified version (vue. min. js) for production. We can run the bundling command with the actual NODE_ENV environment variable set to "production".

How does Vue CLI service Build work?

vue-cli-service build produces a production-ready bundle in the dist/ directory, with minification for JS/CSS/HTML and auto vendor chunk splitting for better caching. The chunk manifest is inlined into the HTML.

What is VueJS development?

VueJS Development FeaturesThe exchange of data from the component to view and from view to the component, ensures a faster and efficient web app development. The bug free applications help deliver your project within a stipulated time frame.


1 Answers

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.

like image 75
rb- Avatar answered Sep 28 '22 07:09

rb-