Persekitaran pembangunan Vue dan persekitaran pengeluaran menetapkan pembolehubah yang berbeza

Dalam pembangunan Vue, adalah perkara biasa bagi kita untuk menetapkan pembolehubah yang berbeza dalam persekitaran yang berbeza. Sebagai contoh, dalam persekitaran pembangunan, kita mungkin perlu menghidupkan beberapa alat penyahpepijatan, manakala dalam persekitaran pengeluaran, kita perlu mematikan alat penyahpepijatan ini untuk meningkatkan prestasi aplikasi. Pada masa ini, kita perlu menetapkan pembolehubah yang berbeza dalam persekitaran pembangunan dan persekitaran pengeluaran.

Di bawah, kami akan memperkenalkan cara menetapkan pembolehubah berbeza dalam Vue.

1. Sediakan dalam Vue-Cli

Vue-Cli ialah alat perancah untuk Vue.js yang mempunyai terbina dalam semua yang diperlukan untuk membangunkan dan membina aplikasi. Jadi, jika anda membangunkan aplikasi anda menggunakan Vue-Cli, anda boleh menetapkan pembolehubah dalam fail konfigurasinya.

Pertama, anda perlu mencipta fail bernama .env. dalam direktori akar projek, dan kemudian tambah nama pembolehubah persekitaran pada penghujung mengikut keperluan anda. Sebagai contoh, kami menambah pembolehubah persekitaran bernama VUE_APP_TEST pada fail seperti berikut:

VUE_APP_TEST=hello world

Kemudian, dalam komponen yang anda perlukan untuk menggunakan pembolehubah persekitaran, anda boleh lulus process.env.VUE_APP_TEST Dapatkan nilai ini pembolehubah persekitaran.

Perlu diambil perhatian bahawa dalam Vue-Cli, semua pembolehubah yang bermula dengan VUE_APP_ akan disuntik secara automatik ke dalam aplikasi, dan hanya apabila pembolehubah NODE_ENV ditetapkan kepada development atau production kepada bekerja dengan betul.

2. Tetapkan dalam Webpack

Jika anda tidak menggunakan Vue-Cli tetapi menggunakan alat pembungkusan Webpack, anda boleh menetapkan pembolehubah persekitaran dalam fail webpack.config.js.

Mula-mula, anda perlu mengimport webpack.DefinePlugin dan kemudian tetapkan pembolehubah persekitaran dalam pemalam seperti berikut:

const webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    new webpack.DefinePlugin({
      TEST: JSON.stringify('hello world')
    })
  ]
}

Kemudian, dalam komponen di mana anda perlu menggunakan pembolehubah persekitaran, anda boleh Gunakan process.env.TEST untuk mendapatkan nilai pembolehubah persekitaran ini.

Perlu diambil perhatian bahawa dalam Webpack, anda perlu menetapkan pembolehubah persekitaran secara manual, dan anda perlu menetapkannya dalam setiap persekitaran, jadi ia agak menyusahkan.

3. Menetapkan dalam Node.js

Jika anda sedang membangunkan aplikasi Vue dalam Node.js, anda boleh menetapkan pembolehubah persekitaran dalam kod sebelah pelayan.

Apabila pelayan bermula, anda boleh menetapkan pembolehubah persekitaran melalui objek process.env, seperti yang ditunjukkan di bawah:

process.env.TEST = 'hello world';

Kemudian, dalam komponen di mana anda perlu menggunakan pembolehubah persekitaran, anda juga boleh Gunakan process.env.TEST untuk mendapatkan nilai pembolehubah persekitaran ini.

Perlu diambil perhatian bahawa jika anda menggunakan Nuxt.js, anda boleh menetapkan pembolehubah persekitaran terus dalam fail .env., yang semudah Vue-Cli.

Ringkasan

Persekitaran pembangunan dan persekitaran pengeluaran yang berbeza memerlukan tetapan pembolehubah yang berbeza Menggunakan Vue-Cli, anda boleh menetapkan pembolehubah dalam fail konfigurasi dengan mudah, dan menggunakan Webpack, anda boleh menetapkannya dalam <.> Pembolehubah, manakala dalam Node.js perlu ditetapkan secara manual dalam kod pelayan. webpack.config.js

Atas ialah kandungan terperinci Persekitaran pembangunan Vue dan persekitaran pengeluaran menetapkan pembolehubah yang berbeza. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!