Vue CLI를 다른 빌드 대상 (개발, 생산)을 사용하도록 어떻게 구성합니까?

Vue CLI를 다른 빌드 대상 (개발, 생산)을 사용하도록 어떻게 구성합니까?

VUE CLI를 구성하려면 개발 및 생산에 다양한 빌드 대상을 사용하려면 vue.config.js 파일을 수정해야합니다. 이 파일을 사용하면 빌드 대상에 따라 적용 할 수있는 다른 구성을 지정할 수 있습니다. 설정하는 방법은 다음과 같습니다.

1. vue.config.js 만들거나 수정하십시오 : 프로젝트의 루트 디렉토리에 vue.config.js 파일이없는 경우 작성하십시오. 이미 하나가있는 경우 다음 구성을 추가하십시오.
2. 환경 별 구성 정의 : process.env.NODE_ENV 를 사용하여 개발 환경과 생산 환경을 구별하기 위해 env.node_env 변수를 사용하십시오. 다음은 vue.config.js 파일의 기본 예입니다.

 <code class="javascript">module.exports = { // Configuration that applies to both environments publicPath: process.env.NODE_ENV === 'production' ? '/production-subdirectory/' : '/', // Other configurations... // ChainWebpack is used to modify the internal webpack configuration chainWebpack: config => { if (process.env.NODE_ENV === 'production') { // Production-specific webpack configurations config.optimization.minimize(true); // Other production-specific optimizations... } else { // Development-specific webpack configurations config.devtool('cheap-module-eval-source-map'); // Other development-specific settings... } } };</code>

이 예에서 publicPath 환경에 따라 다르게 설정되며 chainWebpack 방법은 개발 및 생산에 다른 웹 팩 설정을 적용하는 데 사용됩니다.

3. 빌드 명령 실행 : 응용 프로그램을 실행하려면 다음 명령을 사용하십시오.

   • 개발을 위해 : <code>vue-cli-service serve</code>
   • 생산 : <code>vue-cli-service build</code>

이러한 방식으로 vue.config.js 파일을 설정하면 개발 및 생산 빌드를 위해 테일링 된 다양한 구성간에 쉽게 전환 할 수 있습니다.

Vue CLI의 개발 환경과 생산 환경을 어떻게 전환 할 수 있습니까?

VUE CLI의 개발 및 생산 환경 사이의 전환은 주로 사용하는 명령과 설정된 환경 변수에 의해 처리됩니다.

1. 명령 사용 :

   • 개발 모드 에서 응용 프로그램을 시작하려면 명령을 사용하십시오.

      <code>npm run serve</code>

     또는

      <code>vue-cli-service serve</code>

   • 생산 신청서를 구축하려면 사용하십시오.

      <code>npm run build</code>

     또는

      <code>vue-cli-service build</code>

2. 환경 변수 설정 :

   • Vue Cli는 process.env.NODE_ENV 사용하여 환경을 결정합니다. <code>vue-cli-service serve</code> 실행하면 process.env.NODE_ENV 자동으로 'development' 으로 설정됩니다. <code>vue-cli-service build</code> 실행하면 'production' 으로 설정됩니다.

   • 명령을 실행하기 전에 NODE_ENV 환경 변수를 수동으로 설정할 수도 있습니다. 예를 들어:

      <code>NODE_ENV=production vue-cli-service build</code>

     이를 통해 빌드 프로세스가 생산 설정을 사용하도록합니다.

이러한 명령을 사용하고 환경 변수를 조정하면 Vue CLI의 개발 환경과 생산 환경을 쉽게 전환 할 수 있습니다.

생산 빌드를 최적화하기 위해 VUE CLI에서 어떤 설정을 조정해야합니까?

Vue CLI에서 생산 빌드를 최적화하려면 vue.config.js 파일의 여러 주요 설정에 중점을 두어야합니다. 다음은 조정해야 할 몇 가지 중요한 설정입니다.

1. 미니 화 :

   • 파일 크기를 줄이기 위해 코드가 미수되어 있는지 확인하십시오. 기본적으로 Vue Cli는 terser-webpack-plugin 사용하여 최소화합니다. vue.config.js 에서 구성 할 수 있습니다.

      <code class="javascript">module.exports = { chainWebpack: config => { config.optimization.minimize(true); config.optimization.minimizer('terser').tap(args => { args[0].terserOptions.compress.drop_console = true; return args; }); } };</code>

     이 예제는 또한 파일 크기를 추가로 줄이기 위해 제작에 console 문을 삭제합니다.

2. 코드 분할 :

   • 코드 분할을 활성화하여 현재 페이지에 필요한 JavaScript 만로드 할 수 있습니다. Vue Cli는 자동으로이를 수행하지만 splitChunks 설정을 조정하여 더 이상 최적화 할 수 있습니다.

      <code class="javascript">module.exports = { chainWebpack: config => { config.optimization.splitChunks({ chunks: 'all', minSize: 30000, maxSize: 0, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: { defaultVendors: { test: /[\\/]node_modules[\\/]/, priority: -10 }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true } } }); } };</code>

3. 나무 흔들림 :

   • Vue Cli는 자동으로 트리 흔들림을 활성화하여 사용하지 않은 코드를 제거합니다. 생산 빌드에서 제거 될 수있는 불필요한 모듈 또는 구성 요소를 가져 오지 않도록하십시오.

4. GZIP 압축 :

   • 전송 된 파일의 크기를 추가로 줄이기 위해 생산 빌드에 GZIP 압축을 활성화합니다. 서버 설정에서 구성 할 수 있지만 vue.config.js 에서도 설정할 수도 있습니다.

      <code class="javascript">const CompressionWebpackPlugin = require('compression-webpack-plugin'); module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === 'production') { return { plugins: [new CompressionWebpackPlugin({ test: /\.js$|\.css$/, threshold: 10240, minRatio: 0.8 })] }; } } };</code>

5. 캐싱 :

   • 파일 이름에서 해싱을 사용하여 브라우저 캐싱을 활용하십시오. Vue CLI는 기본적으로 컨텐츠 해싱을 사용하여 브라우저가 컨텐츠가 변경 될 때 캐시 된 버전을 업데이트 할 수 있도록 도와줍니다.

이러한 설정을 조정하면 VUE CLI 프로덕션 빌드를 크게 최적화하여로드 시간이 빠르고 성능이 향상 될 수 있습니다.

VUE CLI의 개발 구축에 더 쉽게 디버깅을위한 소스 맵이 포함되도록하려면 어떻게해야합니까?

VUE CLI의 개발 구축에 더 쉽게 디버깅을위한 소스 맵이 포함되도록하려면 vue.config.js 파일을 구성해야합니다. 소스 맵은 개발 모드에서 기본적으로 활성화되지만 다음과 같이 명시 적으로 설정할 수 있습니다.

1. vue.config.js : 프로젝트의 루트에 vue.config.js 파일이 있는지 확인하고 다음 구성을 추가하십시오.

 <code class="javascript">module.exports = { chainWebpack: config => { if (process.env.NODE_ENV === 'development') { config.devtool('cheap-module-eval-source-map'); } } };</code>

cheap-module-eval-source-map 옵션은 빌드 속도와 개발을위한 디버깅 기능 사이의 균형을 잘 제공합니다. 라인 투-라인 매핑이 포함되어 있지만 열 매핑은 포함되어 있지 않으므로 빌드 프로세스 속도가 빨라집니다.

2. 개발 빌드 실행 : 다음을 사용하여 개발 빌드를 실행할 때

    <code>npm run serve</code>

   또는

    <code>vue-cli-service serve</code>

   VUE CLI는 development 구성을 자동으로 적용하고 vue.config.js 파일에 지정된대로 소스 맵을 포함시킵니다.

이 구성을 사용하면 개발 중에 소스 맵을 사용할 수 있도록하여 브라우저의 개발자 도구에서 응용 프로그램을 쉽게 디버깅 할 수 있습니다.

위 내용은 Vue CLI를 다른 빌드 대상 (개발, 생산)을 사용하도록 어떻게 구성합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!