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

Question

Thanks to dotenv I can use environment variables in my nuxt.config.js file

Only I have whole settings that need to disappear depending on the environment. In some cases, I know how to use a tertiary condition, but in others, I cannot.

For example, for my dev environment, I have to do this:

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',
  },

  …
}

And for my production environment I have to add some things

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/'
    }
  },

  …
}

How to do that simply?

Answer 1

The Nuxt config file is simply a normal .js file.

You can create and modify the exported object the same as any other 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

Use inline conditionals

If you only have minimal differences between environments, maintain the default nuxt.config.js structure and just use inline conditions (ie ternary operator ) wherever you need.

Example:

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

You can also chain multiple conditions...

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

... however now you have more complexity. If it gets too deep, then maybe it's time to have logic outside of the main export object, as @Jordan suggested.