Bagaimanakah saya mengkonfigurasi Vue CLI untuk menggunakan sasaran binaan yang berbeza (pembangunan, pengeluaran)?

Bagaimanakah saya mengkonfigurasi Vue CLI untuk menggunakan sasaran binaan yang berbeza (pembangunan, pengeluaran)?

Untuk mengkonfigurasi Vue CLI untuk menggunakan sasaran binaan yang berbeza untuk pembangunan dan pengeluaran, anda perlu mengubah suai fail vue.config.js anda. Fail ini membolehkan anda menentukan konfigurasi yang berbeza yang boleh digunakan bergantung pada sasaran binaan. Inilah cara anda dapat menetapkannya:

1. Buat atau ubah suai vue.config.js : Jika anda tidak mempunyai fail vue.config.js dalam direktori root projek anda, buat satu. Jika anda sudah mempunyai satu, pastikan untuk menambah konfigurasi berikut.
2. Tentukan konfigurasi khusus persekitaran : Gunakan pembolehubah process.env.NODE_ENV untuk membezakan antara persekitaran pembangunan dan pengeluaran. Berikut adalah contoh asas apa fail vue.config.js anda kelihatan seperti:

 <code class="javascript">module.exports = { // Configuration that applies to both environments publicPath: process.env.NODE_ENV === 'production' ? '/production-subdirectory/' : '/', // Other configurations... // ChainWebpack is used to modify the internal webpack configuration chainWebpack: config => { if (process.env.NODE_ENV === 'production') { // Production-specific webpack configurations config.optimization.minimize(true); // Other production-specific optimizations... } else { // Development-specific webpack configurations config.devtool('cheap-module-eval-source-map'); // Other development-specific settings... } } };</code>

Dalam contoh ini, publicPath ditetapkan secara berbeza berdasarkan persekitaran, dan kaedah chainWebpack digunakan untuk menggunakan tetapan webpack yang berbeza untuk pembangunan dan pengeluaran.

3. Menjalankan Perintah Membina : Apabila anda ingin menjalankan aplikasi anda, gunakan arahan berikut:

   • Untuk pembangunan: <code>vue-cli-service serve</code>
   • Untuk pengeluaran: <code>vue-cli-service build</code>

Dengan menyediakan fail vue.config.js anda dengan cara ini, anda boleh menukar antara konfigurasi yang berbeza yang disesuaikan untuk pembangunan dan pengeluaran pengeluaran.

Bagaimanakah saya boleh menukar antara persekitaran pembangunan dan pengeluaran di Vue CLI?

Beralih antara persekitaran pembangunan dan pengeluaran di Vue CLI terutamanya dikendalikan oleh arahan yang anda gunakan dan pembolehubah persekitaran yang ditetapkan.

1. Menggunakan arahan :

   • Untuk memulakan aplikasi anda dalam mod pembangunan , gunakan arahan:

      <code>npm run serve</code>

     atau

      <code>vue-cli-service serve</code>

   • Untuk membina permohonan anda untuk pengeluaran , gunakan:

      <code>npm run build</code>

     atau

      <code>vue-cli-service build</code>

2. Menetapkan Pembolehubah Persekitaran :

   • Vue CLI menggunakan process.env.NODE_ENV untuk menentukan persekitaran. Apabila anda menjalankan <code>vue-cli-service serve</code> , process.env.NODE_ENV secara automatik ditetapkan untuk 'development' . Apabila anda menjalankan <code>vue-cli-service build</code> , ia ditetapkan untuk 'production' .

   • Anda juga boleh menetapkan pembolehubah persekitaran NODE_ENV secara manual sebelum menjalankan arahan. Contohnya:

      <code>NODE_ENV=production vue-cli-service build</code>

     Ini akan memastikan proses membina menggunakan tetapan pengeluaran.

Dengan menggunakan arahan ini dan mungkin menyesuaikan pembolehubah persekitaran, anda boleh menukar antara persekitaran pembangunan dan pengeluaran di Vue CLI.

Apa tetapan yang harus saya sesuaikan di Vue CLI untuk mengoptimumkan pengeluaran pengeluaran?

Untuk mengoptimumkan pengeluaran dalam Vue CLI, anda harus memberi tumpuan kepada beberapa tetapan utama dalam fail vue.config.js anda. Berikut adalah beberapa tetapan penting untuk disesuaikan:

1. Minifikasi :

   • Pastikan kod anda dikurangkan untuk mengurangkan saiz fail. Secara lalai, Vue CLI menggunakan terser-webpack-plugin untuk minifikasi. Anda boleh mengkonfigurasinya di vue.config.js :

      <code class="javascript">module.exports = { chainWebpack: config => { config.optimization.minimize(true); config.optimization.minimizer('terser').tap(args => { args[0].terserOptions.compress.drop_console = true; return args; }); } };</code>

     Contoh ini juga menjatuhkan pernyataan console dalam pengeluaran untuk mengurangkan saiz fail.

2. Pembahagian kod :

   • Dayakan kod pemisahan untuk memuat hanya JavaScript yang diperlukan untuk halaman semasa. Vue CLI melakukan ini secara automatik, tetapi anda boleh mengoptimumkannya dengan menyesuaikan tetapan splitChunks :

      <code class="javascript">module.exports = { chainWebpack: config => { config.optimization.splitChunks({ chunks: 'all', minSize: 30000, maxSize: 0, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: { defaultVendors: { test: /[\\/]node_modules[\\/]/, priority: -10 }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true } } }); } };</code>

3. Pohon berjabat :

   • Vue CLI secara automatik membolehkan pokok gemetar, yang menghilangkan kod yang tidak digunakan. Pastikan anda tidak mengimport modul atau komponen yang tidak perlu yang boleh dihapuskan dalam membina pengeluaran.

4. Mampatan gzip :

   • Dayakan mampatan GZIP untuk pengeluaran untuk mengurangkan saiz fail yang dipindahkan. Ini boleh dikonfigurasikan dalam tetapan pelayan anda tetapi juga boleh ditubuhkan di vue.config.js :

      <code class="javascript">const CompressionWebpackPlugin = require('compression-webpack-plugin'); module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === 'production') { return { plugins: [new CompressionWebpackPlugin({ test: /\.js$|\.css$/, threshold: 10240, minRatio: 0.8 })] }; } } };</code>

5. Caching :

   • Gunakan hashing dalam nama fail untuk memanfaatkan caching penyemak imbas. Vue CLI menggunakan hashing kandungan secara lalai, yang membantu memastikan penyemak imbas mengemas kini versi cache mereka apabila kandungan berubah.

Dengan menyesuaikan tetapan ini, anda boleh mengoptimumkan pengeluaran pengeluaran Vue CLI anda dengan ketara, menghasilkan masa beban yang lebih cepat dan prestasi yang lebih baik.

Bagaimanakah saya memastikan bahawa pembangunan saya dibina di Vue CLI termasuk peta sumber untuk debugging yang lebih mudah?

Untuk memastikan bahawa pembangunan anda dibina di Vue CLI termasuk peta sumber untuk debugging yang lebih mudah, anda perlu mengkonfigurasi fail vue.config.js anda. Peta sumber didayakan secara lalai dalam mod pembangunan, tetapi anda boleh secara jelas menetapkannya seperti berikut:

1. Ubah suai vue.config.js : Pastikan anda mempunyai fail vue.config.js dalam akar projek anda, dan tambahkan konfigurasi berikut:

 <code class="javascript">module.exports = { chainWebpack: config => { if (process.env.NODE_ENV === 'development') { config.devtool('cheap-module-eval-source-map'); } } };</code>

Pilihan cheap-module-eval-source-map memberikan keseimbangan yang baik antara membina kelajuan dan keupayaan debug untuk pembangunan. Ia termasuk pemetaan line-to-line tetapi tidak termasuk pemetaan lajur, yang mempercepat proses membina.

2. Menjalankan Pembangunan Pembangunan : Apabila anda menjalankan pembangunan pembangunan menggunakan:

    <code>npm run serve</code>

   atau

    <code>vue-cli-service serve</code>

   Vue CLI secara automatik akan menggunakan konfigurasi development dan memasukkan peta sumber seperti yang dinyatakan dalam fail vue.config.js anda.

Dengan menggunakan konfigurasi ini, anda memastikan bahawa peta sumber tersedia semasa pembangunan, menjadikannya lebih mudah untuk debug permohonan anda dalam alat pemaju pelayar.

Atas ialah kandungan terperinci Bagaimanakah saya mengkonfigurasi Vue CLI untuk menggunakan sasaran binaan yang berbeza (pembangunan, pengeluaran)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!