Vue menetapkan konfigurasi vue.config.js yang berbeza untuk persekitaran yang berbeza

Question

Saya mempunyai aplikasi berbilang halaman dan saya memerlukan beberapa halaman untuk dipaparkan hanya dalam persekitaran pembangunan saya. Ini vue.config.js saya:

module.exports = {
  productionSourceMap: false,

  pages: {
    index: "src/main.js",
    admin: {
      entry: "src/main-admin.js",
      template: "public/index.html",
      filename: "admin"
    }
  }
};

Saya memerlukan halaman indeks untuk masuk ke dalam binaan pengeluaran saya, tetapi alih keluar pentadbir daripadanya. Adakah terdapat cara untuk menambah konfigurasi bersyarat persekitaran pada vue.config.js, atau menambah vue.config.js setiap persekitaran?

Answer 1

vue.config.js ialah javascript, jadi anda boleh melakukan hampir apa sahaja yang anda mahukan di sana. Dalam kes anda, anda boleh melakukan ini:

let config = {
  productionSourceMap: false,
  pages: {
    index: "src/main.js",
  }
}

if (process.env.NODE_ENV != 'production') {
  config.pages.admin = {
    entry: "src/main-admin.js",
    template: "public/index.html",
    filename: "admin"
  }
}

module.exports = config

Jika anda memerlukan sesuatu yang lebih baik daripada "terbina dalam" product、development 等更多的环境，您可以通过创建 .env 文件来创建自己的环境，例如包含 .env.myenv 的文件，其中包含 NODE_ENV=myenv

https://cli.vuejs.org/guide/mode -and-env.html#mode