即使在生产模式下运行,也会出现“vue running in developer mode”(vue正在开发人员模式下运行)警告

btxsgosb  于 2023-02-13  发布在  Vue.js
关注(0)|答案(1)|浏览(165)

我正在生产模式下运行vue,但仍然收到vue在开发者模式

下运行的警告
项目运行良好,我可以看到它在生产模式下运行。但我仍然收到警告“您正在开发模式下运行Vue。请确保在部署生产时打开生产模式。”
下面是我的vue.config.js main.js和dockerfile 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();

多工锉

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

qf9go6mv1#

检查package.json文件下的build命令,development模式在build命令中设置。如下所示...

"scripts": {
    "serve": "vue-cli-service serve",
    "devserve": "run-s build:dev watch",
    "lint": "vue-cli-service lint",
    "build": "vue-cli-service build --mode 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",
}

确保运行npm run build:prod进行生产构建,然后进行部署,这样就不会出现错误。

相关问题