Bagaimana untuk menambah nama domain ke vue

Apabila membangunkan aplikasi Vue, biasanya perlu mengkonfigurasi nama domain untuknya, yang boleh menjadikan kita lebih mudah dan profesional apabila menggunakan aplikasi itu. Artikel ini akan memperkenalkan cara menambah nama domain pada aplikasi Vue.

Pertama, kita perlu membuka fail konfigurasi aplikasi Vue. Fail ini biasanya vue.config.js terletak dalam direktori akar. Jika fail ini tidak wujud dalam projek kami, kami boleh menciptanya dengan menjalankan vue add @vue/cli-plugin-config dalam direktori akar projek. Setelah dibuat, kami boleh membuka fail dan mengkonfigurasinya seperti berikut.

module.exports = {
  devServer: {
    host: 'www.example.com', // 指定开发服务器监听的主机域名
    port: 8080, // 指定开发服务器监听的端口号
    https: false, // 是否使用https协议
    hotOnly: false // 是否启用热模块替换
  }
};

Dalam kod di atas, devServer ialah item konfigurasi pelayan pembangunan Vue-cli, di mana kita boleh menentukan nama domain hos yang pelayan pembangunan mendengar melalui atribut host. Di sini kami menentukannya sebagai www.example.com. Jika anda ingin menentukan alamat IP untuk dipantau, anda boleh terus mengisi alamat IP yang sepadan. Selain itu, kami juga boleh menentukan nombor port yang pelayan pembangunan mendengar melalui atribut port. Sebagai contoh, di sini kami nyatakan 8080.

Selain nama domain hos dan nombor port, kami juga boleh menentukan sama ada untuk menggunakan protokol https melalui atribut https dan atribut hotOnly untuk menentukan sama ada untuk mendayakan penggantian modul panas. Jika kami menyatakan https: true, kami perlu menjana sijil HTTPS secara setempat dahulu dan menambahkannya pada konfigurasi pelayan pembangunan.

Selepas konfigurasi selesai, kita boleh memulakan pelayan pembangunan dengan memasukkan npm run serve dalam terminal. Pada masa ini, masukkan www.example.com:8080 dalam penyemak imbas untuk mengakses aplikasi Vue kami.

Jika kita ingin menggunakan nama domain yang berbeza dalam persekitaran yang berbeza, kita boleh melakukannya dengan mentakrifkan arahan yang berbeza dalam pilihan package.json fail scripts. Sebagai contoh, kita boleh menambah arahan berikut dalam pilihan scripts:

"scripts": {
  "serve:dev": "vue-cli-service serve --mode development --open www.dev.example.com:8080",
  "serve:test": "vue-cli-service serve --mode test --open www.test.example.com:8080",
  "serve:prod": "vue-cli-service serve --mode production --open www.example.com:8080",
}

Dengan pilihan --mode, kita boleh menentukan persekitaran yang berbeza dan dengan itu menggunakan nama domain yang berbeza. Contohnya, apabila kita menjalankan perintah npm run serve:dev, Vue akan menggunakan persekitaran bernama development dan secara automatik membuka www.dev.example.com:8080 dalam penyemak imbas.

Ringkasan:

Artikel ini memperkenalkan cara menambah nama domain pada aplikasi Vue. Dengan mengkonfigurasi nama domain hos dan nombor port dalam fail vue.config.js, kami boleh menentukan nama domain hos yang didengari oleh pelayan pembangunan, dan menggunakan nama domain yang berbeza melalui arahan yang berbeza, menjadikan penggunaan aplikasi kami lebih profesional dan mudah.

Atas ialah kandungan terperinci Bagaimana untuk menambah nama domain ke vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!