Vue in DEV in production

Question

Version 2.5.13

Link to the source code https://jsfiddle.net/esrgxLfu/

Description I have a PHP application that uses Vue JS mainly for the settings page. All settings are created using Vue, and we use Webpack. Everything works fine, and when we are in the live version, the console error that Vue is in development mode. We also use Vue for only one component on the dashboard page. This is a Vue TODO list, similar to a Vue list. On the toolbar page, we get a console message that Vue is in development mode. We use the same Webpack for the toolbar and settings as the same settings. I searched the clock to try and find the answer, but I was not successful, so I am creating this problem.

In the php file, we have this to put the vue component in:

<div id="vue-tasks"></div>

and then we included the javascript file and variables.

You can see everything that is used in the violin, but I really don’t think I can make it reproducible, sorry if you can’t help me, but it uses a bunch of things from PHP Symfony and twig so I was not sure that I can to do.

Expected? Vue is operational.

What is really going on? Vue is in a dev environment.

Webpack configuration

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
         dashboard: [
            './assets/js/pages/dashboard.js' // Dashboard is the part where we have this issue and the JS is in the fiddle I provided above.
        ],
        settings: [
            './assets/js/pages/settings/main.js'
        ]
    },
    output: {
        filename: process.env.NODE_ENV === 'production' ? 'js/[name].[chunkhash].js' : 'js/[name].js',
        path: path.resolve(__dirname, 'web/dist'),
        publicPath: '/dist/'
    },
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images/'
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                include: path.resolve(__dirname, "assets"),
                use: ['babel-loader']
            },
            {
                test: /\.(woff2?|ttf|eot|svg)$/,
                loader: 'url-loader?limit=10000&name=fonts/[name].[ext]'
            },
            {
                test: /\.scss$/,
                include: path.resolve(__dirname, "assets"),
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader','resolve-url-loader','sass-loader?sourceMap']
                })
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader','resolve-url-loader']
                })
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        'scss': 'vue-style-loader!css-loader!sass-loader',
                        'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
                    }
                }
            },
        ]
    },
    resolve: {
        alias: {
            jquery: "jquery/src/jquery",
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new ExtractTextPlugin({
            filename: process.env.NODE_ENV === 'production' ? 'css/[name].[chunkhash].css' : 'css/[name].css'
        }),
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery'
        }),
        new WebpackMd5Hash(),
        new ManifestPlugin({
            basePath: '/dist/'
        })
    ],
    performance: {
        hints: false
    },
    devtool: 'source-map'
};

if (process.env.NODE_ENV === 'production') {
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            minimize: true,
            comments: false,
            compress: {
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        }),
        new CleanWebpackPlugin('dist' , {
            root: path.resolve(__dirname, "web"),
            verbose: true,
            dry: false
        })
    ])
}

Also this is the message I get in the console.

You start Vue in design mode. Be sure to enable production mode when deploying for production. See More Tips at https://vuejs.org/guide/deployment.html