Vue生产模式下仍显示开发者模式警告问题求助

架构老林

2026-8-1

Vue生产模式下仍收到开发模式警告的问题

我在生产模式下运行Vue项目，项目运行状态正常且已确认处于生产模式，但仍收到警告：

"You are running Vue in development mode. Make sure to turn on production mode when deploying for production."

以下是我的相关配置文件内容：

vue.config.js 文件

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 文件

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();

Dockerfile 文件

# 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/cli-service@4.5.15 @vue/cli-plugin-babel@4.5.15 @vue/cli-plugin-eslint@4.5.15 @vue/cli-plugin-typescript@4.5.15 @vue/cli-plugin-unit-jest@4.5.15 vue-template-compiler@2.6.14 typescript@4.6.3 autoprefixer@8.6.5 less-loader@4.1.0 less@3.9.0 webpack@4.46.0 babel-loader@8.2.3 @babel/core@7.16.0

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"]

问题原因及解决方法

原因分析

问题出在vue.config.js的两处配置：

你在chainWebpack中将生产模式下的NODE_ENV替换成了自定义的'production-with-warns'，而Vue判断生产模式的唯一依据是process.env.NODE_ENV是否严格等于'production'，这个非标准值会让Vue误判为开发环境。
configureWebpack中手动添加的webpack.DefinePlugin属于冗余配置——Vue CLI会自动处理环境变量的注入，重复配置可能和后续的chainWebpack逻辑产生冲突。

解决步骤

删除冗余的webpack.DefinePlugin配置
在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)
    }
}),

修正chainWebpack中的生产环境配置
保留默认的NODE_ENV: 'production'，如果需要自定义环境标识，新增一个独立变量，不要替换标准的NODE_ENV：

chainWebpack: config => {
    if (process.env.NODE_ENV === "production") {
        config.plugin('define')
        .tap(definitions => {
            definitions[0] = Object.assign(definitions[0], {
                'process.env': {
                    ...definitions[0]['process.env'],
                    // 新增自定义环境变量，不修改NODE_ENV
                    APP_ENV: "'production-with-warns'"
                }
            });
            return definitions;
        });
    }

    // 保留原有vue-loader配置
    config.module
        .rule('vue')
        .use('vue-loader')
        .tap(args => {
            args.compilerOptions.whitespace = 'preserve'
        })
},

重新构建部署
执行Docker镜像构建和部署流程，此时Vue会识别到NODE_ENV为'production'，不再弹出开发模式警告，同时你可以通过process.env.APP_ENV获取自定义的环境标识。

内容的提问来源于stack exchange，提问作者prateeknaik

Vue生产模式下仍显示开发者模式警告问题求助

vue.config.js 文件 #

main.js 文件 #

Dockerfile 文件 #

问题原因及解决方法 #

原因分析 #