Apakah yang perlu saya lakukan jika api laluan antara muka tiada selepas vue dibungkus?

Dengan pembangunan berterusan teknologi bahagian hadapan, rangka kerja bahagian hadapan juga sentiasa diperbaiki dan dioptimumkan. Salah satu rangka kerja bahagian hadapan yang lebih popular pada masa ini ialah Vue adalah ringan, mudah dipelajari dan digunakan serta digemari oleh majoriti pembangun. Tetapi dalam proses menggunakan Vue, beberapa pembangun menghadapi masalah: selepas pembungkusan, laluan antara muka (api) hilang. Jadi apa masalahnya?

Penerangan Masalah

Semasa proses pembangunan, kami akan menggunakan laluan antara muka, seperti:

const url = '/api/user/login';

Apabila kami membungkus projek Vue, kami mungkin menemui antara muka laluan (api) hilang, seperti:

const url = 'user/login';

Ini menyebabkan antara muka permintaan gagal.

Punca masalah

Sebab masalah ini ialah Vue menggunakan webpack untuk pembungkusan, dan kaedah pembungkusan webpack adalah untuk membungkus dan memampatkan semua sumber, termasuk JS, CSS dan imej dll .

Kita boleh lihat vue.config.js fail konfigurasi dalam projek Vue:

module.exports = {
  // 配置打包和部署的根路径
  publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/',
  // 打包时不生成.map文件，加快打包速度
  productionSourceMap: false
};

Antaranya, publicPath ialah laluan yang kami gunakan selepas pembungkusan. Dalam persekitaran pembangunan, kami menggunakan / untuk mewakili laluan akar; dalam persekitaran pengeluaran, kami menggunakan ./ untuk mewakili laluan relatif.

Memandangkan laluan antara muka (api) kami ialah laluan mutlak, apabila pembungkusan, laluan antara muka (api) akan dibungkus ke dalam laluan relatif. Ini membawa kepada masalah laluan antara muka (api) hilang.

Penyelesaian

Untuk menangani masalah ini, kita boleh menggunakan kaedah berikut untuk menyelesaikannya.

Kaedah 1: Gunakan laluan mutlak

Kita boleh menukar laluan antara muka (api) kepada laluan mutlak, iaitu menambah awalan nama domain, seperti:

const url = 'http://localhost:8080/api/user/login';

Dengan cara ini, dalam Apabila pembungkusan, laluan antara muka (api) tidak akan dibungkus ke dalam laluan relatif.

Kaedah 2: Konfigurasikan proksi

Kami boleh menambah proksi dalam fail konfigurasi vue.config.js untuk memajukan laluan antara muka (api) ke alamat sasaran. Dalam persekitaran pembangunan, kami menggunakan pelayan pembangunan, yang merupakan pelayan proksi Kami boleh menggunakan pelayan proksi ini untuk pemajuan.

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 目标地址
        changeOrigin: true, // 是否改变原始地址
        secure: true, // 是否使用https
        pathRewrite: {
          '^/api': '' // 路径重写
        }
      }
    }
  }
};

Selepas mengkonfigurasi proksi, apabila kami meminta antara muka dalam kod, kami hanya perlu menulis laluan relatif, seperti:

const url = '/api/user/login';

Dengan cara ini, selepas pembungkusan , laluan antara muka (api) Ia tidak akan hilang.

Kaedah 3: Gunakan vue-cli-plugin-apimock

Kita boleh menggunakan pemalam vue-cli-plugin-apimock untuk mengejek antara muka. Pemalam ini membolehkan kami menggunakan laluan antara muka (api) dengan data Mock semasa fasa pembangunan, dan kemudian menggantikan laluan antara muka (api) dengan alamat antara muka sebenar semasa pembungkusan. Ini bukan sahaja dapat memastikan kecekapan pembangunan, tetapi juga mengelakkan masalah laluan antara muka (api) hilang.

Ringkasan

Melalui analisis di atas, kita dapat melihat bahawa masalah laluan antara muka (api) yang hilang disebabkan oleh menukar laluan mutlak kepada laluan relatif semasa pembungkusan. Untuk menyelesaikan masalah ini, kita boleh menggunakan laluan mutlak, mengkonfigurasi ejen atau menggunakan pemalam vue-cli-plugin-apimock. Kaedah yang mana untuk dipilih bergantung pada keadaan dan keperluan sebenar kita.

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika api laluan antara muka tiada selepas vue dibungkus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!