Bagaimana untuk membungkus projek Vue-cli? Penerangan terperinci kaedah

Vue-cli ialah alat perancah yang boleh membantu kami menjana infrastruktur projek Vue dengan cepat. Dalam pembangunan sebenar, untuk memudahkan penggunaan, kami perlu membungkus projek Vue ke dalam fail statik dan memuat naiknya ke pelayan. Artikel ini akan memperkenalkan cara membungkus projek Vue-cli.

1. Arahan pembungkusan
Masukkan arahan berikut dalam terminal atau baris arahan untuk membungkus projek Vue-cli:

npm run build

Arahan ini akan membungkus projek Vue kami menjadi statik dokumen. Selepas pembungkusan berjaya, fail statik akan disimpan dalam folder dist dalam direktori akar projek.

2. Konfigurasi pembungkusan
Apabila membungkus projek Vue-cli, kami boleh mengkonfigurasi proses pembungkusan mengikut keperluan. Vue-cli menyediakan beberapa konfigurasi lalai, yang boleh kita ganti dengan menukar fail konfigurasi Vue-cli.

1. Ubah suai direktori output
   Secara lalai, fail statik yang dibungkus akan disimpan dalam folder dist dalam direktori akar projek. Jika anda perlu menyimpan fail statik dalam direktori lain, kami boleh mengubah suai nilai atribut outputDir dalam config/index.js, contohnya:

module.exports = {
    //...
    outputDir: 'static'
}

Konfigurasi ini akan menyimpan fail statik dalam akar projek dalam folder statik di bawah direktori.

2. Ubah suai laluan fail statik
   Secara lalai, laluan fail statik berpakej ialah laluan relatif Jika kita perlu mengubah suai laluan fail statik kepada laluan mutlak, kita boleh berbuat demikian dalam config/index. Ubah suai nilai atribut assetsPublicPath dalam js, contohnya:

module.exports = {
    //...
    assetsPublicPath: 'http://www.example.com/static/'
}

Dengan cara ini, laluan fail statik yang dibungkus akan menjadi http://www .example.com/static/.

3. Ubah suai nama fail dan laluan fail
   Kami boleh menukar nama fail berpakej dan laluan fail dengan mengubah suai nama fail dan atribut chunkFilename dalam fail config/prod.env.js. Contohnya:

module.exports = {
    NODE_ENV: '"production"',
    filename: 'js/[name].[chunkhash].js',
    chunkFilename: 'js/[id].[chunkhash].js'
}

Konfigurasi ini akan menyimpan fail JS yang dibungkus dalam direktori dist/js, dan nama fail dijana melalui pencincangan.

3. Ringkasan
Artikel ini memperkenalkan cara menggunakan Vue-cli untuk membungkus projek Vue. Kami boleh menyesuaikan proses pembungkusan dengan mengubah suai fail konfigurasi, termasuk mengubah suai direktori output, mengubah suai laluan fail statik dan mengubah suai nama fail dan laluan fail. Semoga artikel ini bermanfaat kepada anda.

Atas ialah kandungan terperinci Bagaimana untuk membungkus projek Vue-cli? Penerangan terperinci kaedah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!