Penggunaan persekitaran pengeluaran

Kebanyakan kandungan berikut didayakan secara lalai apabila anda menggunakan Vue CLI. Bahagian ini hanya berkaitan untuk tetapan binaan tersuai anda.

Direktori

• Dayakan mod persekitaran pengeluaran

  Gunakan alat binaan
Templat pra- kompilasi
Ekstrak CSS komponen
Jejaki ralat masa jalan

Dalam persekitaran pembangunan, Vue akan menyediakan banyak amaran untuk membantu Anda menangani kesilapan dan perangkap biasa. Dalam persekitaran pengeluaran, kenyataan amaran ini tidak berguna, tetapi akan meningkatkan saiz aplikasi. Selain itu, beberapa semakan amaran mempunyai overhed masa jalan yang kecil yang boleh dielakkan dalam mod pengeluaran.

<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

  🎜Jangan gunakan alat binaan🎜🎜🎜🎜Jika anda menggunakan versi bebas lengkap Vue, iaitu, terus gunakan elemen <script> untuk memperkenalkan Vue tanpa membina ia terlebih dahulu, sila ingat untuk menggunakannya dalam pengeluaran Persekitaran menggunakan versi termampat (vue.min.js). Kedua-dua versi boleh didapati dalam Arahan pemasangan 🎜. 🎜🎜🎜🎜

  🎜🎜Gunakan alat binaan🎜🎜🎜🎜Apabila menggunakan alat binaan seperti webpack atau Browserify, kod sumber Vue akan berdasarkan process.env.NODE_ENV menentukan sama ada untuk mendayakan mod persekitaran pengeluaran Lalai ialah mod persekitaran pembangunan. Terdapat kaedah dalam webpack dan Browserify untuk mengatasi pembolehubah ini untuk mendayakan mod persekitaran pengeluaran Vue, dan pernyataan amaran juga akan dialih keluar oleh alat pemampatan semasa proses binaan. Semua ini telah diprakonfigurasikan dalam templat vue-cli, tetapi adalah bagus untuk mengetahui cara mengkonfigurasinya. 🎜🎜🎜webpack🎜🎜🎜Dalam webpack 4+, anda boleh menggunakan mod pilihan: 🎜

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

  🎜Tetapi dalam webpack 3 dan ke bawah, anda perlu menggunakan DefinePlugin🎜: 🎜

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

  🎜🎜Browserify🎜🎜🎜🎜🎜 Tetapkan NODE_ENV kepada semasa menjalankan arahan pembungkusan " ". Ini bersamaan dengan memberitahu vueify untuk mengelak daripada memperkenalkan muat semula panas dan kod berkaitan pembangunan. 🎜

• Lakukan penukaran global envify pada fail yang dibungkus. Ini membolehkan alat pemampatan untuk mengalih keluar semua pernyataan amaran yang dibalut dalam keadaan pembolehubah persekitaran dalam kod sumber Vue. Contohnya:

// 使用 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()
    }
  }
}

• atau gunakan envify dalam Gulp:

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

• atau gunakan Grunt dan grunt-browserify

  rrreee