如何根据环境在 nuxt.config.js 中使用不同的设置

Question

感谢 dotenv 我可以在我的 nuxt.config.js 文件中使用环境变量

只有我有整个设置需要根据环境消失。 在某些情况下，我知道如何使用第三条件，但在其他情况下，我不能。

例如，对于我的开发环境，我必须这样做：

export default {
    head: {
        title: process.env.APP_NAME,
    },

    modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    '@nuxtjs/dotenv'
  ],

  axios: {
    baseURL: 'http://app.test/api',
  },

  …
}

对于我的生产环境，我必须添加一些东西

export default {
    head: {
        title: process.env.APP_NAME,
    },

    modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    '@nuxtjs/dotenv',
    '@nuxtjs/proxy'
  ],

  axios: {
    prefix: '/api/',
    proxy: true
  },

  // also a new bloc
  proxy: {
    '/api/': {
      target: 'https://my-api.app/'
    }
  },

  …
}

如何简单地做到这一点？

Answer 1

Nuxt 配置文件只是一个普通的.js文件。

您可以像任何其他 object 一样创建和修改导出的 object。

const isProd = true;

const nuxtConfig = {
    head: {
        title: process.env.APP_NAME,
    },

    modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    '@nuxtjs/dotenv'
  ],

  axios: {
    baseURL: 'http://app.test/api',
  },
};

if(isProd) {
    nuxtConfig.modules.push('@nuxtjs/proxy');
    nuxtConfig.axios.proxy = true;
    nuxtConfig.proxy = {
        '/api/': {
            target: 'https://my-api.app/'
          }
    }
}

export default nuxtConfig;

Answer 2

使用内联条件

如果环境之间的差异很小，请保持默认的nuxt.config.js结构，并在需要的任何地方使用内联条件（即三元运算符）。

例子：

head: {
    title: process.env.NODE_ENV === 'prod' ? "my prod title" : "my dev title"
}

您还可以链接多个条件...

head: {
    title: process.env.NODE_ENV === 'prod1' ? "my prod title 1" : process.env.NODE_ENV === 'prod2' ? "my prod title 2" : "my dev title"
}

...但是现在你有更多的复杂性。 如果它变得太深，那么也许是时候在主要导出 object 之外设置逻辑了，正如@Jordan 所建议的那样。