Apakah kaedah untuk mengkonfigurasi parameter devServer merentas domain dalam Vue3?

devServer ialah objek pilihan yang digunakan untuk mengkonfigurasi pelayan pembangunan. Ia boleh digunakan untuk mengkonfigurasi pelbagai pilihan pelayan, seperti proksi, nombor port, HTTPS, dll.

Berikut ialah beberapa parameter dan tetapan devServer yang biasa digunakan:

• port: Tentukan nombor port pelayan pembangunan, lalainya ialah 8080 .

• host: Tentukan nama hos pelayan pembangunan, lalai ialah localhost.

• https: Untuk mendayakan HTTPS, anda boleh memasukkan parameter jenis Object untuk mengkonfigurasi pilihan HTTPS.

• open: Buka penyemak imbas secara automatik, lalainya ialah false. Anda boleh memasukkan parameter jenis String untuk menentukan nama penyemak imbas.

• proxy: digunakan untuk mengkonfigurasi proksi. Anda boleh memasukkan parameter jenis Object untuk mengkonfigurasi pilihan proksi.

• hot: Dayakan muat semula panas, lalainya ialah true.

• compress: Dayakan pemampatan gzip.

• historyApiFallback: Dayakan penghalaan mod sejarah HTML5. Apabila laluan yang diakses oleh penyemak imbas tidak wujud, fail index.html akan dikembalikan dan bukannya halaman 404.

• publicPath: Menentukan laluan awam sumber, yang boleh menjadi laluan relatif atau laluan mutlak.

• quiet: Lumpuhkan semua maklumat output.

• clientLogLevel: Menentukan tahap log yang dipaparkan dalam konsol penyemak imbas, lalai ialah info.

• overlay: Paparkan ralat kompilasi dalam penyemak imbas.

• watchOptions: Pilihan untuk mengkonfigurasi fail pemantauan.

• contentBase: Tentukan direktori fail statik, yang lalai kepada direktori akar projek.

• before dan after: Jalankan kod tersuai sebelum atau selepas pelayan bermula.

Berikut ialah contoh konfigurasi devServer:

// vue.config.js
module.exports = {
  devServer: {
    port: 8080,
    host: 'localhost',
    https: false,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    },
    hot: true,
    compress: true,
    historyApiFallback: true,
    publicPath: '/',
    quiet: true,
    clientLogLevel: 'warning',
    overlay: true,
    watchOptions: {
      poll: false
    },
    contentBase: './public',
    before: function(app) {
      // 在服务器启动之前执行自定义代码
    },
    after: function(app) {
      // 在服务器启动之后执行自定义代码
    }
  }
};

Dalam contoh ini, kami membuat konfigurasi berikut:

• Tetapkan nombor port pelayan pembangunan kepada 8080.

• Tetapkan nama hos pelayan pembangunan kepada localhost.

• Lumpuhkan HTTPS.

• Buka penyemak imbas secara automatik.

• Konfigurasikan proksi kepada proksi semua permintaan bermula dengan /api hingga http://localhost:3000.

• Dayakan muat semula panas.

• Dayakan pemampatan gzip.

• Dayakan penghalaan mod sejarah HTML5.

• Tentukan laluan awam sumber sebagai direktori akar.

• Lumpuhkan semua maklumat output.

• Tetapkan tahap log kepada warning.

• Tunjukkan ralat kompilasi dalam penyemak imbas.

• Pilihan untuk memantau fail ditetapkan kepada nilai lalai.

• Tentukan direktori fail statik sebagai ./public.

• Laksanakan kod tersuai sebelum dan selepas permulaan pelayan.

Anda boleh mengkonfigurasinya mengikut keperluan anda devServer. Contoh ini hanyalah titik permulaan dan boleh diubah suai dan dilanjutkan untuk memenuhi keperluan anda.

Atas ialah kandungan terperinci Apakah kaedah untuk mengkonfigurasi parameter devServer merentas domain dalam Vue3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!