laluan sumber penggunaan vue cli 3

Vue CLI 3 ialah alat perancah berdasarkan Webpack yang disediakan secara rasmi oleh Vue.js, yang digunakan untuk membina projek Vue.js dengan cepat. Dengan populariti Vue.js dalam aplikasi berskala besar, Vue CLI 3 juga telah menjadi bahagian yang sangat diperlukan dalam pembangunan bahagian hadapan. Walau bagaimanapun, apabila benar-benar menggunakan projek Vue CLI 3, banyak pembangun akan menghadapi masalah laluan sumber, menyebabkan projek itu gagal berjalan seperti biasa. Artikel ini akan memperkenalkan secara terperinci masalah dan penyelesaian laluan sumber penggunaan Vue CLI 3.

1. Laluan sumber lalai Vue CLI 3

Laluan sumber lalai dalam Vue CLI 3 ialah laluan relatif, iaitu, "./". Ini bermakna Vue CLI 3 akan secara automatik mengenal pasti direktori tempat fail sumber anda (seperti imej, CSS, JS, dll.) berada dan menyusunnya ke dalam laluan relatif untuk memastikan akses yang betul dalam mana-mana persekitaran.

2. Kejadian masalah

Laluan sumber lalai Vue CLI 3 nampaknya sangat mudah, tetapi masih terdapat beberapa masalah yang dihadapi dalam aplikasi sebenar. Salah satu masalah biasa ialah laluan sumber yang dibungkus tidak betul, menyebabkan halaman web tidak dipaparkan dengan betul. Masalah ini biasanya disebabkan oleh projek yang digunakan ke persekitaran yang berbeza dengan laluan yang berbeza.

Sebagai contoh, jika projek Vue CLI 3 digunakan pada direktori akar pelayan, laluan sumbernya hendaklah "/static/example.png". Walau bagaimanapun, jika projek Vue CLI 3 digunakan ke subdirektori pada pelayan, laluan sumbernya akan menjadi "/subdir/static/example.png". Pada masa ini, jika anda menggunakan laluan relatif lalai Vue CLI 3, fail sumber tidak boleh dibaca dengan betul, menyebabkan halaman web tidak dipaparkan dengan betul.

3. Penyelesaian

Untuk menyelesaikan masalah laluan sumber, Vue CLI 3 menyediakan pelbagai cara untuk menetapkan laluan sumber. Kita boleh memilih salah satu cara untuk menyelesaikan masalah mengikut keperluan sebenar.

1. Gunakan parameter publicPath

Dalam fail vue.config.js, anda boleh menggunakan parameter publicPath untuk menetapkan laluan sumber. Parameter publicPath menentukan laluan relatif bagi fail sumber yang dibungkus, yang boleh menjadi laluan mutlak atau laluan relatif. Contohnya:

module.exports = {
  publicPath: '/subdir/'
};

Kod di atas menambah awalan "/subdir/" pada semua laluan fail sumber, supaya walaupun digunakan pada subdirektori, fail sumber yang sepadan boleh dimuatkan dengan betul.

2. Gunakan pembolehubah persekitaran

Dalam sesetengah senario, kita mungkin perlu mengubah suai laluan sumber secara dinamik mengikut persekitaran penggunaan yang berbeza. Pada masa ini, kita boleh menggunakan pembolehubah persekitaran untuk menyelesaikan masalah.

Dalam fail konfigurasi vue.config.js, anda boleh menggunakan pembolehubah persekitaran process.env.NODE_ENV untuk menentukan persekitaran projek semasa. Dalam persekitaran pembangunan, kita boleh menetapkan laluan sumber kepada laluan relatif. Dalam persekitaran pengeluaran, kami boleh menetapkan laluan sumber kepada laluan mutlak untuk memastikan projek boleh memuatkan fail sumber yang sepadan dengan betul dalam persekitaran yang berbeza. Contohnya:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-website/'
    : '/'
};

Dalam kod di atas, jika projek berada dalam persekitaran pengeluaran, laluan sumber ialah "/my-website/", jika tidak, ia adalah laluan relatif.

3. Gunakan CDN

Dalam beberapa projek trafik tinggi, kita perlu menggunakan CDN untuk mempercepatkan pemuatan fail sumber. Pada masa ini, kita boleh menggunakan konfigurasi webpack yang disediakan oleh Vue CLI 3 untuk menetapkan laluan CDN. Dalam vue.config.js, anda boleh menyesuaikan konfigurasi Webpack melalui kaedah chainWebpack. Contohnya:

module.exports = {
  chainWebpack: config => {
    config.plugin('html')
      .tap(args => {
        args[0].cdn = 'https://cdn.example.com/';
        return args;
      });
  }
};

Dalam kod di atas, kami menggunakan kaedah chainWebpack untuk menyesuaikan konfigurasi Webpack dan menetapkan atribut cdn dalam parameter konfigurasi pemalam html-webpack-plugin ke laluan CDN "https://cdn.example .com/".

4. Ringkasan

Vue CLI 3 ialah alat perancah berkuasa yang boleh membina projek Vue.js dengan cepat. Walau bagaimanapun, dalam aplikasi sebenar, mungkin terdapat masalah dengan laluan sumber lalai Vue CLI 3, menyebabkan projek gagal berjalan dengan betul. Untuk menyelesaikan masalah ini, kami boleh menyesuaikan laluan sumber dengan menetapkan parameter publicPath, menggunakan pembolehubah persekitaran atau menggunakan CDN untuk memastikan projek boleh memuatkan fail sumber yang sepadan dengan betul dalam persekitaran yang berbeza. Artikel ini memperkenalkan penyelesaian ini dan berharap dapat membantu semua orang.

Atas ialah kandungan terperinci laluan sumber penggunaan vue cli 3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!