"vue running in developer mode" warning appears even when running in production mode

Question

I am running vue in production mode but i still get the warning of vue running in developer mode

the project is running fine and i can see that it running in production mode. but i am still getting the warning "You are running Vue in development mode. Make sure to turn on production mode when deploying for production."

Below are my vue.config.js main.js and dockerfile vue.config.js file

const webpack = require('webpack');

module.exports = {
    devServer: {
        host: "localhost",
        port: 3123,
        disableHostCheck: true,
    },
    publicPath: './',
    configureWebpack: {
        plugins: [
            new webpack.DefinePlugin({
                // allow access to process.env from within the vue app
                'process.env': {
                    NODE_ENV: JSON.stringify(process.env.NODE_ENV)
                }
            }),
            new webpack.ProvidePlugin({
                jQuery: 'jquery',
                '$': 'jquery',
            }),
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        ]
    },
    chainWebpack: config => {
        if (process.env.NODE_ENV === "production") {
            config.plugin('define')
            .tap(definitions => {
                    definitions[0] = Object.assign(definitions[0], {
                        'process.env': {
                            NODE_ENV: "'production-with-warns'"
                        }
                    });
                    return definitions
                });
        }

        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(args => {
                args.compilerOptions.whitespace = 'preserve'
            })
    },
    lintOnSave: false,
    transpileDependencies: ['vue2-datatable-component']
};

main.js file

import Vue from 'vue';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap3-dialog';
import 'bootstrap3-dialog/dist/css/bootstrap-dialog.css'
import 'bootstrap-select';
import 'bootstrap-select/dist/css/bootstrap-select.css'
import 'cropperjs'
import 'cropperjs/dist/cropper.css'
import 'flag-icon-css/css/flag-icon.css'
import 'eonasdan-bootstrap-datetimepicker'
import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css'
import 'font-awesome/css/font-awesome.css'
import './useCompositionApi'

import App from './atar/App.vue';
import store from './store.js';
import routerConfig from './router.js';
import filters from './filters.js';
import resource from './resource.js';
import directives from './directives';
import mixins from './mixins';
import i18n from './i18n';

import * as uiv from 'uiv';
import Datatable from 'vue2-datatable-component';
import VueScrollTo from 'vue-scrollto';
import VueNotification from 'vue-notification';
import AsyncComputed from 'vue-async-computed';

import extensions from './extensions';
import windowConfiguration from './windowConfiguration.js';
import VueAutosize from 'vue-autosize';
import errorHandler from "./errorHandler.js";
import EventBusPlugin from "./plugin/EventBusPlugin";
import WindowResizePlugin from "./plugin/WindowResizePlugin";
import ScrollPlugin from "./plugin/ScrollPlugin";

import 'nodelist-foreach';
import WSSubscriber from "./plugin/WSSubscriber";
import validationConfiguration from "./veeValidateConfiguration";

import { AppInitializer } from "./AppInitializer";

Vue.use(Vuex);

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(error => {
        if (error.name !== "NavigationDuplicated") {
            throw error;
        }
    });
}
Vue.use(VueRouter);
Vue.use(uiv);
Vue.use(VueAutosize);
Vue.use(Datatable);
Vue.use(VueScrollTo, {
    duration: 500,
    easing: "ease",
    offset: 0,
    cancelable: true,
    onDone: false,
    onCancel: false,
    x: false,
    y: true
});
Vue.use(VueNotification);
Vue.use(AsyncComputed);
Vue.use(EventBusPlugin);
Vue.use(WindowResizePlugin);
Vue.use(ScrollPlugin);
Vue.use(WSSubscriber);

new AppInitializer()
    .addStep(() => resource.configure())
    .addStep((ctx) => store.configure(ctx))
    .addStep(() => filters.configure())
    .addStep(() => mixins.configure())
    .addStep(() => directives.configure())
    .addStep(() => i18n.configure())
    .addStep(() => windowConfiguration.configure())
    .addStep(() => validationConfiguration.configure())
    .addStep(() => {
        Vue.config.productionTip = false;
        if (process.env.NODE_ENV !== 'development') {
            Vue.config.devtools = false;
        }
    })
    .addStep((ctx) => {
        ctx['router'] = new VueRouter(routerConfig);
    })
    .addStep((ctx) => {
        new Vue({
            el: '#app',
            router: ctx['router'],
            store: new Vuex.Store(ctx['store']),
            render: h => h(App)
        });
    })
    .addStep((ctx) => {
        ctx['router'].afterEach((route) => {
            document.title = route.meta.titleProducer(route);
        });
    })
    .addStep(() => extensions.configureGlobal())
    .addStep(() => errorHandler.configure())
    .initialize();

docker file

# a.k.a. node:lts-alpine
FROM node:14.17.4-alpine as app-build-stage

RUN apk add git
WORKDIR /app

RUN npm i -g @vue/[email protected] @vue/[email protected] @vue/[email protected] @vue/[email protected] @vue/[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] @babel/[email protected]

COPY ./package*.json ./legal_notice.sh ./

RUN npm ci --production
RUN npm link @vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-typescript @vue/cli-plugin-unit-jest vue-template-compiler typescript autoprefixer less-loader less webpack babel-loader @babel/core

COPY . .

ENV NODE_ENV production

RUN export freeMem=$(free -m | grep Mem | awk '{print $4}') &&\
    export minRequiredMem=2048 &&\
    if [[ $freeMem -lt $minRequiredMem ]];\
        then\
        echo "[WARNING] Free memory ($freeMem MB) is less than the required limit ($minRequiredMem MB)." &&\
        echo "[WARNING] Build is likely to fail due to insufficient memory.";\
    fi;\
    npm run build;\
    if [[ ! -d "/app/dist" ]];\
        then echo "The npm build process has failed and /app/dist folder is not found.";\
        if [[ $freeMem -lt $minRequiredMem ]];\
            then\
            echo "Free memory : $freeMem MB";\
            echo "Minimum memory required : $minRequiredMem MB";\
            echo "The build has failed most likely due to insufficient memory.";\
            exit 1;\
        fi\
    fi



WORKDIR /app
COPY ./docker/package*.json ./docker/server.js ./docker/apiinfo.js.template ./docker/entrypoint.sh /app/
RUN apk upgrade
RUN npm ci

# there are some overlay issues in the Jenkins so rm -rf ..../npm/ is not applicable
RUN find /usr/local/lib/node_modules/npm/ -type f -exec rm -f {} \;

COPY --from=app-build-stage /app/dist /app/static/

ENTRYPOINT ["./entrypoint.sh"]

Answer 1

Check your build command under package.json file, the development mode is set in the build command. like so...

  "scripts": {
    "serve": "vue-cli-service serve",
    "devserve": "run-s build:dev watch",
    "lint": "vue-cli-service lint",
    "build": "vue-cli-service build --mode development",
}

I usually have two build commands configured, one to build for production and one for development

  "scripts": {
    "serve": "vue-cli-service serve",
    "devserve": "run-s build:dev watch",
    "lint": "vue-cli-service lint",
    "build:dev": "vue-cli-service build --mode development",
    "build:prod": "vue-cli-service build --mode production",
}

Make sure to run npm run build:prod for a production build and then deploy and the error should not appear.