How to use webpack Encore to set VueJS production mode

Question

I'm trying to set up production mode for VueJS using Webpack Encore. So I specified a new plugin as the doc said but this seems not changing anything.

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('production'),
}),

I tried multiple different syntax for NODE_ENV setting but nothing seems to work

Did I miss something ? My webpack conf look like this

const
  CopyWebpackPlugin = require('copy-webpack-plugin'),
  Encore = require('@symfony/webpack-encore'),
  UglifyJsPlugin = require('uglifyjs-webpack-plugin'),
  webpack = require('webpack');

Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .cleanupOutputBeforeBuild()
  .addEntry('app', './assets/js/app.js')
  .addEntry('admin', './assets/js/admin.js')
  .addEntry('common', './assets/js/common.js')
  .addPlugin(new CopyWebpackPlugin([
   ...
  ]))
  .enableSassLoader()
  .enableVueLoader()
  .autoProvideVariables({
    '$': 'jquery',
    'jQuery': 'jquery',
    'window.$': 'jquery',
    'window.jQuery': 'jquery',
  })
  .enableSourceMaps(!Encore.isProduction())
;
const config = Encore.getWebpackConfig();

config.plugins = config.plugins.filter(
  (plugin) => !(plugin instanceof webpack.optimize.UglifyJsPlugin)
);
if (Encore.isProduction()) {
  config.plugins.push(
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
    }),
    new UglifyJsPlugin()
  );
}
config.resolve.alias = {
  handlebars: 'handlebars/dist/handlebars.min.js',
  vue: 'vue/dist/vue.js',
};

module.exports = config;

I also tried without success with this

.enableVueLoader(function(options) {
  options.preLoaders = {
    productionMode: true,
  };
});

I'm using Webpack Encore 0.20 with Webpack 3 and VueJS 2.5.16

Answer 1

There are 2 ways to do this,

1. in your webpack.config.js, change the alias of vue as follows:

   config.resolve.alias = {
       vue: 'vue/dist/vue.min.js',
   };
   

2. Explicitly turn off development tools.

   import Vue from 'vue'
   import App from './App'
   
   Vue.config.devtools = false
   Vue.config.productionTip = false
   
   new Vue({
      el: '#app',
      template: '<App/>',
      components: { App }
   })
   

Lastly, you do need to build your app in production mode:

yarn run encore production

Reference Tutorial