프로덕션 환경 배포

Vue CLI를 사용하면 다음 콘텐츠 대부분이 기본적으로 활성화됩니다. 이 섹션은 사용자 정의 빌드 설정에만 해당됩니다.

디렉토리

• 프로덕션 환경 모드 활성화

  • 빌드 도구를 사용하지 않음

  • 빌드 도구 사용

• 템플릿 사전- 컴파일

• 구성 요소의 CSS 추출

• 런타임 오류 추적

프로덕션 환경 모드 활성화

개발 환경에서 Vue는 다양한 기능을 제공합니다. 일반적인 실수와 함정을 처리하는 데 도움이 되는 경고입니다. 프로덕션 환경에서 이러한 경고 문은 쓸모가 없지만 애플리케이션 크기가 증가합니다. 또한 일부 경고 확인에는 프로덕션 모드에서 피할 수 있는 작은 런타임 오버헤드가 있습니다.

빌드 도구를 사용하지 마세요

Vue의 완전한 독립 버전을 사용하는 경우, 즉 빌드 없이 Vue를 소개하려면 <script> 요소를 직접 사용하세요. 프로덕션 환경에서는 압축 버전(vue.min.js)을 사용하므로 미리 참고하시기 바랍니다. 두 버전 모두 설치 지침 <script> 元素引入 Vue 而不提前进行构建，请记得在生产环境下使用压缩后的版本 (vue.min.js)。两种版本都可以在安装指导中找到。

使用构建工具

当使用 webpack 或 Browserify 类似的构建工具时，Vue 源码会根据 process.env.NODE_ENV 决定是否启用生产环境模式，默认情况为开发环境模式。在 webpack 与 Browserify 中都有方法来覆盖此变量，以启用 Vue 的生产环境模式，同时在构建过程中警告语句也会被压缩工具去除。所有这些在 vue-cli 模板中都预先配置好了，但了解一下怎样配置会更好。

webpack

在 webpack 4+ 中，你可以使用 mode 选项：

module.exports = {
  mode: 'production'
}

但是在 webpack 3 及其更低版本中，你需要使用 DefinePlugin：

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

Browserify

• 在运行打包命令时将 NODE_ENV 设置为 "production"。这等于告诉 vueify에서 확인할 수 있습니다.

  🎜🎜🎜

  🎜🎜빌드 도구 사용🎜🎜🎜🎜webpack 또는 Browserify와 같은 빌드 도구를 사용할 때 Vue 소스 코드는 process.env.NODE_ENV를 기반으로 합니다. 는 프로덕션 환경 모드를 활성화할지 여부를 결정합니다. 기본값은 개발 환경 모드입니다. webpack 및 Browserify에는 이 변수를 재정의하여 Vue의 프로덕션 환경 모드를 활성화하는 방법이 있습니다. 동시에 빌드 프로세스 중에 압축 도구에 의해 경고 문도 제거됩니다. 이 모든 것은 vue-cli 템플릿에 미리 구성되어 있지만 구성 방법을 알아두면 좋을 것입니다. 🎜🎜🎜webpack🎜🎜🎜webpack 4+에서는 mode 옵션을 사용할 수 있습니다: 🎜

  NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

  🎜그러나 webpack 3 이하에서는 DefinePlugin🎜: 🎜

  // 使用 envify 的自定义模块来定制环境变量var envify = require('envify/custom')
  
  browserify(browserifyOptions)
    .transform(vueify)
    .transform(    // 必填项，以处理 node_modules 里的文件
      { global: true },
      envify({ NODE_ENV: 'production' })
    )
    .bundle()

  🎜🎜Browserify🎜🎜🎜🎜🎜 패키징 명령 "production 실행 시 NODE_ENV를 로 설정합니다. ". 이는 핫 리로딩 및 개발 관련 코드 도입을 방지하도록 vueify에 지시하는 것과 같습니다. 🎜

• 패키지 파일에 대해 전역 envify 변환을 수행합니다. 이를 통해 압축 도구는 Vue 소스 코드의 환경 변수 조건에 래핑된 모든 경고 문을 제거할 수 있습니다. 예:

// 使用 envify 自定义模块指定环境变量var envify = require('envify/custom')

browserify: {  dist: {    options: {
        // 该函数用来调整 grunt-browserify 的默认指令
        configure: b => b
        .transform('vueify')
        .transform(
            // 用来处理 `node_modules` 文件
          { global: true },
          envify({ NODE_ENV: 'production' })
        )
        .bundle()
    }
  }
}

• 또는 Gulp에서 envify를 사용:

const replace = require('rollup-plugin-replace')
rollup({  // ...
  plugins: [
    replace({      'process.env.NODE_ENV': JSON.stringify( 'production' )
    })
  ]
}).then(...)

• 또는 Grunt 및 grunt-browserify를 사용하여 envify를 사용:

  rrreee