Apa yang perlu dilakukan jika logik berubah selepas vue dibungkus

Vue.js ialah rangka kerja bahagian hadapan yang popular yang membantu kami menulis kod dengan lebih cekap semasa membina aplikasi web. Vue.js mempunyai kebolehselenggaraan dan kebolehskalaan yang baik. Walau bagaimanapun, dalam persekitaran pengeluaran, perubahan logik akan berlaku selepas Vue.js dibungkus, yang membawa banyak masalah kepada kita. Dalam artikel ini, kami akan membincangkan isu ini secara mendalam dan memberikan beberapa penyelesaian.

Mengapa logik berubah selepas Vue.js dibungkus?

Semasa fasa pembangunan, kami boleh menulis kod aplikasi untuk Vue.js dengan mudah. Walau bagaimanapun, dalam persekitaran pengeluaran, kita perlu membungkus kod dan menghantarnya kepada pelanggan. Melalui proses ini, kod Vue.js dimampatkan dan dikelirukan untuk mengurangkan saiz fail, meningkatkan prestasi dan keselamatan.

Namun, semasa proses pembungkusan, kami mungkin menghadapi beberapa masalah. Sesetengah komponen dan pemalam Vue.js akan mempunyai perubahan logik selepas pembungkusan. Ini kerana apabila membungkus, pengkompil menggabungkan komponen dan fail pemalam Vue.js ke dalam satu fail dan mengoptimumkannya. Ini mungkin menyebabkan beberapa ciri Vue.js tidak berfungsi dengan betul, seperti penghalaan dinamik, komponen dinamik, acara dihidupkan dan arahan tersuai.

Bagaimana untuk menyelesaikan perubahan logik selepas pembungkusan Vue.js?

1. Gunakan pengecam untuk menyelesaikan masalah perubahan nama komponen

Selepas pembungkusan, kerana nama komponen ditukar, modul tidak boleh merujuk antara satu sama lain pilihan webpack. Dalam webpack Tambah konfigurasi dalam .config.js atau vue.config.js:

module.exports = {
  resolve: {
    alias: {
      "vue$": "vue/dist/vue.esm.js"
    }
  }
}

Ini ialah penyelesaian standard menyelesaikan perubahan nama komponen.

2. Gunakan ProvidePlugin webpack untuk mengglobalkan modul yang diperlukan

Kadangkala kita perlu memanggil beberapa modul secara global Dalam kes ini, kita perlu menggunakan ProvidePlugin webpack untuk mengglobalkan modul ini boleh digunakan terus dalam mana-mana modul. Tambahkan konfigurasi berikut dalam webpack.config.js:

const webpack = require("webpack")

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]
}

3 Gunakan vue.config.js untuk konfigurasi

Tambah konfigurasi berikut dalam vue.config.js:

rreee<.>Ini ialah fail konfigurasi Vue.js biasa, yang menyelesaikan masalah laluan fail dengan mengkonfigurasi resolve.alias.

4. Elakkan kompilasi berulang komponen

Dalam Vue.js, apabila komponen dirujuk oleh berbilang komponen induk, setiap komponen induk akan membuat contoh berasingan dan menyusun templat komponen secara bebas. Ini akan menyebabkan komponen yang sama disusun berulang kali, dan prestasi akan terjejas selepas jangka masa panjang. Dengan menggunakan pilihan cacheDirectory vue-loader, komponen dicache untuk mengelakkan berbilang kompilasi dan meningkatkan prestasi.

module.exports = {
    runtimeCompiler: true,
    configureWebpack: {    
        resolve: {
            alias: {
                '@components': resolve('src/components'),
                '@views': resolve('src/views'),
            }
        },
        externals:{
            'vue': 'Vue',
            'element-ui': 'ELEMENT',
            'vue-router': 'VueRouter',
            'axios': 'axios',
            'vuex': 'Vuex'
        },
    }
}

Ringkasan

Semasa proses pembangunan Vue.js, kita perlu memberi perhatian kepada isu pengendalian perubahan logik dalam persekitaran pengeluaran. Melalui konfigurasi webpack, kami boleh menyelesaikan kebanyakan masalah. Walau bagaimanapun, semasa proses pembangunan, kita harus menggunakan versi terkini Vue.js sebanyak mungkin, dan menguji kod dengan teliti sebelum pembungkusan untuk mengelakkan masalah yang tidak perlu.

Atas ialah kandungan terperinci Apa yang perlu dilakukan jika logik berubah selepas vue dibungkus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!