Rumah >hujung hadapan web >View.js >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:
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.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.
Menjalankan Perintah Membina : Apabila anda ingin menjalankan aplikasi anda, gunakan arahan berikut:
Dengan menyediakan fail vue.config.js
anda dengan cara ini, anda boleh menukar antara konfigurasi yang berbeza yang disesuaikan untuk pembangunan dan pengeluaran pengeluaran.
Beralih antara persekitaran pembangunan dan pengeluaran di Vue CLI terutamanya dikendalikan oleh arahan yang anda gunakan dan pembolehubah persekitaran yang ditetapkan.
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>
Menetapkan Pembolehubah Persekitaran :
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.
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:
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.
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>
Pohon berjabat :
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>
Caching :
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.
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:
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.
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!