javascript - Bagaimanakah vue-cli membina kod antara muka yang berbeza mengikut pelayan antara muka belakang belakang yang berbeza?

Question

Semasa proses pembangunan, alamat yang dipanggil oleh antara muka dalam komponen npm run dev ialah pembolehubah API yang ditakrifkan oleh global global seperti berikut:

//Buka persekitaran pembangunan
// global.API = '/api';

// Buka persekitaran ujian
// global.API = '/test';

//Persekitaran uat terbuka
// global.API = '/uat';

// Buka persekitaran pengeluaran
// global.API = '/www';

Dalam persekitaran pengeluaran, bagaimana untuk menukar API kepada pembolehubah persekitaran pengeluaran secara automatik mengikut antara muka yang berbeza apabila menggunakan binaan npm run?

Answer 1

Setelah memikirkan kod yang dijana oleh vue-cli selama beberapa hari, Vue berpendapat anda hanya memerlukan tiga konfigurasi: pembangunan (npm run dev), pengeluaran (npm run build) dan ujian unit (npm run test). . .

Tamat kata-kata kasar.

1. Buka nama fail config/index.js，修改build里面的env dan dapatkannya berdasarkan pembolehubah persekitaran
Selepas pengubahsuaian, ia mungkin akan kelihatan seperti ini:

module.exports = {
  build: {
    env: require('./'+(process.env.VUE_CONFIG||'prod')+'.env'),
    //......

2. Letakkan prod.env.js复制两份，分别是uat.env.js、testing.env.js

dalam direktori konfigurasi

3. Ubah suai dev.env.js、uat.env.js、testing.env.js、prod.env.js这四个文件，在大括号里面添加API: '"/api或uat或其他什么"' seperti berikut:

module.exports = {
  NODE_ENV: '"production"',
  API: '"/api"'
}

4 Kemudian anda boleh mengakses pembolehubah ini melalui process.env.API di mana-mana sahaja.

5 Apabila membungkus, tetapkan pembolehubah persekitaran dahuluVUE_CONFIG，例如export VUE_CONFIG=uat && npm run build.

Answer 2

https://stackoverflow.com/que...

Answer 3

https://github.com/tonyljl526...
Anda boleh melihat perancah projek ini, yang berdasarkan ekspres, vue2 dan webpack. Untuk mencapai keperluan anda, terutamanya lihat config/renderConfig.js