我正在生产模式下运行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"]
1条答案
按热度按时间qf9go6mv1#
检查
package.json
文件下的build
命令,development
模式在build
命令中设置。如下所示...我通常配置了两个构建命令,一个用于生产构建,一个用于开发构建
确保运行
npm run build:prod
进行生产构建,然后进行部署,这样就不会出现错误。