Cara menyesuaikan vue kepada pelayar versi rendah

Dengan perkembangan pesat teknologi bahagian hadapan, semakin banyak tapak web dan aplikasi menggunakan rangka kerja JavaScript generasi baharu seperti Vue untuk menyediakan penyelesaian bahagian hadapan yang pantas, boleh diselenggara dan berskala. Walau bagaimanapun, disebabkan beberapa sebab sejarah dan had teknikal, sesetengah pengguna masih menggunakan versi penyemak imbas yang lebih rendah. Ini membawa kepada persoalan: bagaimana untuk menjalankan aplikasi Vue dengan betul dalam pelayar lama ini?

Dalam artikel ini, kita akan membincangkan masalah penyesuaian dan penyelesaian Vue dalam pelayar versi rendah.

Mengapa kita harus menyesuaikan diri dengan penyemak imbas lama?

Sebelum memahami cara Vue menyesuaikan diri dengan penyemak imbas versi rendah, kita perlu memahami sebab kita perlu melakukan perkara ini. Tidak dinafikan bahawa Vue ialah rangka kerja yang sangat baik yang menyediakan alat dan ciri yang berkuasa untuk memudahkan proses kami membina aplikasi. Walau bagaimanapun, sama ada kita suka atau tidak, kita perlu menghadapi realiti: masih terdapat sebilangan besar pengguna yang menggunakan pelayar lapuk.

Menurut data Statcounter, sehingga Februari 2021, lebih daripada 10% pengguna di seluruh dunia masih menggunakan penyemak imbas IE. Jika kami tidak menyesuaikan diri dengan penyemak imbas lama, kami akan kehilangan pengguna tersebut, yang akan memberi kesan kepada trafik dan hasil tapak web atau apl kami.

Selain itu, ketidakserasian dengan penyemak imbas versi rendah juga boleh menyebabkan beberapa fungsi tidak berjalan dengan betul atau ralat berlaku, sekali gus menjejaskan pengalaman pengguna ini adalah salah satu matlamat teras kami dalam mengoptimumkan tapak web atau aplikasi.

Bagaimana untuk menyesuaikan diri dengan pelayar IE?

Vue hanya menyokong penyemak imbas moden secara lalai, yang bermaksud kita perlu mengambil langkah tambahan untuk serasi dengan penyemak imbas lama. Berikut ialah beberapa cara:

1. Gunakan CDN untuk memperkenalkan Polyfill

Polyfill ialah coretan kod yang meniru API JavaScript baharu dalam penyemak imbas lama. Versi masa jalan Vue memerlukan ciri ES5 Jika kita ingin menggunakan Vue dalam pelayar lama, kita perlu memasukkan Polyfill ke dalam kod.

Kami boleh menggunakan CDN untuk memperkenalkan Polyfill, seperti polyfill.io. Perkhidmatan ini menjana kod Polyfill secara dinamik berdasarkan versi penyemak imbas pengguna, jadi kami hanya perlu menggunakan kod mudah untuk serasi dengan penyemak imbas lama:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

2. Gunakan Babel untuk menukar kod

Cara lain untuk serasi dengan pelayar lama ialah menggunakan Babel. Babel ialah penukar JavaScript yang menukar kod ES6+ yang kami tulis kepada kod ES5 yang boleh difahami oleh pelayar lama.

Kami perlu memasang pemalam babel-preset-env dan babel-loader untuk menjadikan Vue menyokong Babel. Kami menetapkan konfigurasi berikut dalam webpack.config.js:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      },
      // ...
    ]
  }
};

Dalam konfigurasi ini, kami memberitahu Webpack untuk menggunakan babel-loader untuk menukar semua fail .js kepada ES5 untuk keserasian dengan penyemak imbas lama.

3. Ubah suai konfigurasi pembungkusan

Vue CLI menyediakan fail konfigurasi vue.config.js, di mana kami boleh membuat beberapa tetapan tersuai. Sebagai contoh, kita boleh menambah pilihan transpileDependencies di sini untuk memberitahu Vue CLI untuk menterjemah kebergantungan tertentu.

module.exports = {
  transpileDependencies: [
    'vue',
    'vuex',
    'vue-router'
  ]
};

Menggunakan pilihan ini, kita boleh mengelakkan masalah biasa yang menyebabkan masalah dalam penyemak imbas lama, seperti ralat tidak ditentukan untuk Object.assign.

Kesimpulan

Polyfill, Babel dan mengubah suai konfigurasi pembungkusan adalah tiga kaedah yang sangat berguna apabila menyesuaikan aplikasi Vue agar serasi dengan pelayar lama. Kita boleh memilih kaedah yang berbeza mengikut keadaan khusus kita. Tidak kira kaedah yang kami gunakan, kami harus sentiasa mempertimbangkan pengalaman pengguna untuk menyediakan aplikasi yang boleh diakses dan berkualiti tinggi untuk semua pengguna.

Atas ialah kandungan terperinci Cara menyesuaikan vue kepada pelayar versi rendah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!