Programing

VueJS는 프로덕션 모드에서 빌드된 경우에도 "개발 모드" 메시지를 표시함

c10106 2022. 5. 9. 21:26
반응형

VueJS는 프로덕션 모드에서 빌드된 경우에도 "개발 모드" 메시지를 표시함

VueJS2(2.2.0)를 프로덕션 모드로 실행하는 데 문제가 있음."Vue를 개발 모드에서 실행 중"이라는 메시지는 프로덕션 모드에서 웹 팩으로 빌드해도 콘솔에 항상 나타난다.https://vuejs.org/v2/guide/deployment.html에 따르면, 웹 팩을 프로덕션 모드에서 실행하면 충분하고 모든 것이 축소되어 웹 팩은 프로덕션 모드에서 실행된다는 것을 '알고 있는' 것처럼 보이지만, vueJs는 제대로 작동하지 않는다.

내 웹 팩 구성은 다음과 같다.

let webpack = require('webpack');
let path = require('path');

module.exports = {
  entry: {
    app: './src/app.js',
      vendor: ['vue', 'axios']
    },
  output: {
    path: path.resolve(__dirname, 'public/js'),
    filename: "[name].js",
    publicPath: './public',
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'initial',
          name: 'vendor',
          test: /[\\/]node_modules[\\/]/,
        }
      }
    }
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    }
  }
};

프로덕션용으로 축소된 파일을 빌드하기 위해 다음 작업을 실행하십시오.

webpack --mode=production --hide-modules

웹팩(4.11.1)을 실행하기 전에 NODE_ENV를 수동으로 "프로덕션"으로 설정해 보았지만, 아무런 차이가 없었다...

내가 뭘 놓쳤지?

별칭을 설정할 때vue/dist/vue.js, 당신은 항상 개발 모드에 있는 파일을 사용하고 있다.별칭을 다음으로 변경vue/dist/vue.min.js생산 모드에 있게 될 거야

빌드 환경에 맞게 Vue 버전을 설정할 수 있다.이 예에서는 다음과 같이 가정한다.process.env.NODE_ENV하기로 되어 있다production생산 빌드용, 그래서 당신은 이 예제를 사용하는 것이 사실인지 확인할 필요가 있다.

...
resolve: {
  alias: {
    vue: process.env.NODE_ENV == 'production' ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js'
  }
}

자세한 내용은 이 Github 문제를 참조하십시오.

참조URL: https://stackoverflow.com/questions/50730145/vuejs-shows-development-mode-message-even-with-on-build-in-production-mode

반응형