Bagaimana untuk menetapkan penyemak imbas yang dibuka selepas projek vue dimulakan

Semasa proses pembangunan projek Vue, kami biasanya menggunakan perkhidmatan yang disediakan oleh webpack-dev-server atau Vue-CLI untuk memulakan pelayan pembangunan setempat. Selepas pelayan pembangunan ini dimulakan, mereka akan membuka penyemak imbas lalai secara automatik dan melawati halaman utama direktori akar projek. Walau bagaimanapun, dalam beberapa kes, kami mungkin perlu membuka penyemak imbas tertentu pada permulaan, seperti jika kami ingin menggunakan Chrome sebagai penyemak imbas lalai semasa pembangunan.

Jadi, bagaimana untuk menetapkan projek Vue untuk membuka penyemak imbas yang ditentukan selepas ia dimulakan? Ia sebenarnya agak mudah, dan dalam artikel ini kami akan memperkenalkan dua kaedah untuk mencapai matlamat ini.

1. Gunakan fail konfigurasi yang disertakan dengan vue-cli

Dalam projek dengan Vue-CLI versi 3.x ke atas, kita boleh mencari vue dalam akar projek direktori .config.js fail konfigurasi, yang membolehkan kami mengatasi dan melanjutkan konfigurasi lalai. Kami boleh menetapkan penyemak imbas semasa permulaan dengan menambahkan konfigurasi berikut pada fail ini:

module.exports = {
  devServer: {
    open: 'chrome', // 设置启动时的浏览器
    port: 8080 // 设置端口号
  }
}

Di sini, kami menetapkan item konfigurasi terbuka kepada chrome, yang bermaksud menggunakan penyemak imbas Chrome semasa permulaan. Kami juga boleh menetapkan nombor port dan item konfigurasi devServer lain yang berkaitan. Selepas menyimpan pengubahsuaian dan memulakan pelayan pembangunan, penyemak imbas Chrome akan secara automatik membuka dan melawati halaman utama direktori akar projek.

2. Gunakan arahan silang env dan buka

Jika kita perlu menetapkan masa permulaan dalam Vue-CLI 2.x atau projek lain menggunakan webpack-dev-server For pelayar, kita boleh menggunakan arahan silang env dan buka. Mula-mula, kita perlu memasang kebergantungan silang-env dalam projek:

npm install cross-env --save-dev

Kemudian, tambah arahan berikut dalam fail package.json:

{
  "scripts": {
    "dev": "cross-env BROWSER=chrome webpack-dev-server --open --port 8080"
  }
}

Di sini, kami akan configure BROWSER Item ditetapkan kepada chrome, yang bermaksud bahawa penyemak imbas Chrome digunakan semasa memulakan. Kami juga menggunakan pilihan --open dan --port untuk menetapkan penyemak imbas agar dibuka secara automatik dan nombor port. Jalankan arahan npm run dev untuk memulakan pelayan pembangunan, dan penyemak imbas Chrome akan secara automatik membuka dan melawati halaman utama direktori akar projek.

Ringkasan

Artikel ini memperkenalkan dua kaedah untuk menyediakan projek Vue untuk membuka penyemak imbas yang ditentukan selepas permulaan: menggunakan fail konfigurasi yang disertakan dengan vue-cli dan arahan silang-env dan buka . Tidak kira kaedah yang digunakan, kami boleh menggunakan penyemak imbas kegemaran kami untuk pratonton dan nyahpepijat semasa membangun.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan penyemak imbas yang dibuka selepas projek vue dimulakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!