Bagaimanakah vue tidak boleh mendedahkan beberapa konfigurasi? Perkongsian kemahiran konfigurasi

Dengan populariti rangka kerja bahagian hadapan, Vue.js telah menjadi salah satu rangka kerja pilihan untuk membangunkan aplikasi Aplikasi Halaman Tunggal (SPA) dinamik. Salah satu kelebihan Vue.js ialah ia menyediakan pembangun dengan banyak pilihan konfigurasi, tetapi beberapa item konfigurasi tidak semestinya perlu didedahkan di luar projek Menyimpan item konfigurasi ini tidak terdedah akan membantu meningkatkan kecekapan keselamatan dan pembangunan projek. .

Artikel ini akan memperkenalkan beberapa petua tentang cara untuk tidak mendedahkan beberapa konfigurasi dalam Vue.js.

1. Gunakan fail .env untuk mengurus konfigurasi sensitif

Menggunakan fail konfigurasi yang berbeza dalam persekitaran pembangunan yang berbeza adalah keperluan yang sangat biasa dalam pembangunan bahagian hadapan. Vue.js menyediakan cara mudah untuk mengurus konfigurasi sensitif menggunakan fail .env. Fail

.env ialah fail yang disimpan dalam direktori akar projek Ia terdiri daripada satu siri pasangan nilai kunci Kekunci pasangan nilai kunci mesti diawali dengan VUE_APP_ untuk menunjukkan konfigurasi sensitif. . Dalam Vue.js, anda boleh menggunakan process.env untuk membaca pembolehubah persekitaran.

Sebagai contoh, kita boleh menambah kandungan berikut dalam fail .env:

VUE_APP_SECRET="this_is_a_secret"

Buat fail bernama config.js dan tambahkan kod berikut di dalamnya:

const secret = process.env.VUE_APP_SECRET;

Dengan cara ini, dalam persekitaran yang berbeza, kita hanya perlu menukar konfigurasi dalam fail .env untuk mengurus konfigurasi sensitif.

Tetapi harus diingat bahawa oleh kerana fail .env disimpan dalam teks yang jelas, beberapa maklumat sulit yang penting tidak seharusnya disimpan dalam fail.

2. Gunakan pemalam Vue untuk mengurus konfigurasi tidak sensitif

Selain konfigurasi sensitif, kami juga akan menghadapi beberapa konfigurasi tidak sensitif, seperti alamat API, laluan sumber statik , nama permohonan, dsb. Konfigurasi ini tidak melibatkan sebarang data sensitif dan boleh didedahkan dalam projek.

Vue.js menyediakan pemalam untuk mengurus konfigurasi tidak sensitif. Fungsi pemalam adalah untuk berkongsi fungsi tertentu secara global, seperti memperkenalkan perpustakaan luaran, menentukan pembolehubah global, dsb.

Ciri penting pemalam Vue ialah ia boleh diguna semula dan seperti komponen.

Berikut ialah contoh kod untuk melaksanakan pemalam yang dipanggil "AppModule":

const AppModule = {
  install(Vue) {
    Vue.prototype.$appName = 'myApp'; // 定义应用程序名称
    Vue.prototype.$apiUrl = 'http://api.myapp.com'; // 定义API url，可以在任何地方使用
  }
};

Selepas memasang pemalam,

Vue.use(AppModule);

Pada ketika ini , $appName dan $apiUrl boleh digunakan sepanjang projek. Sebagai contoh, kita boleh menggunakan pembolehubah global ini dalam komponen Vue:

export default {
  methods: {
    fetchData() {
      fetch(`${this.$apiUrl}/data`).then(res => res.json()).then(data => console.log(data));
    }
  }
}

Dengan cara ini, kita boleh berkongsi beberapa konfigurasi antara komponen yang berbeza sambil memastikan kod itu jelas dan ringkas.

3. Gunakan konfigurasi asas Webpack untuk mengurus sumber statik

Dalam Vue.js, Webpack ialah alat binaan lalai Apabila kita perlu membungkus dan memproses sumber statik, Webpack juga yang kita perlukan untuk memberi perhatian kepada beberapa konfigurasi. Dalam konfigurasi asas ini, kita boleh menggunakan beberapa teknik biasa untuk mengurus beberapa konfigurasi awam dan konfigurasi sensitif. Berikut ialah kes pelaksanaan sebenar:

module.exports = {
  // ...其他webpack配置...
  plugins: [
    // 定义全局变量，可以在代码中使用 
    new webpack.DefinePlugin({
      'process.env': {
        VUE_APP_SECRET: JSON.stringify(process.env.VUE_APP_SECRET),
        VUE_APP_API_URL: JSON.stringify(process.env.VUE_APP_API_URL)
      }
    })
  ]
};

Serpihan konfigurasi ini mengandungi pemprosesan beberapa maklumat sensitif yang dilindungi dan kami menggunakan DefinePlugin untuk menyuntiknya ke dalam kod. Kelebihan ini ialah kita tidak perlu lagi mengimport maklumat sensitif secara manual dalam fail .env, menjadikan kod lebih bersih.

Ringkasnya, Vue.js menyediakan banyak pilihan konfigurasi yang fleksibel Pada masa yang sama, kami juga boleh menggunakan beberapa teknik untuk memastikan beberapa item konfigurasi peribadi dan meningkatkan kecekapan keselamatan dan pembangunan projek.

Atas ialah kandungan terperinci Bagaimanakah vue tidak boleh mendedahkan beberapa konfigurasi? Perkongsian kemahiran konfigurasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!