根据nuxt.config.js中的服务器创建动态环境变量

Question

I have added below ENV data inside nuxt.config.js file

env: {
      apiUrl: 'http://mywebsite.local/api/',
      webUrl: 'http://mywebsite.local/',

      apiUrl: 'https://mywebsite.live/api/',
      webUrl: 'https://mywebsite.live/'
},

Depending on the environment, I keep the 2 lines commented. So when I am working locally, I comment the 2 lines with mywebsite.live url. And when the files are uploaded to server, I comment the 2 lines with url mywebsite.local.

What I want to do is that the code should detect if the site is running locally or on the server and use the ENV configs based on that. How can I do that?

Answer 1

You can tell if you're in production or development with this env variable: process.env.NODE_ENV which you can use in the ternary operator to solve your problem.

env: {
  apiUrl: process.env.NODE_ENV === "production" ? 'https://mywebsite.live/api/' : 'http://mywebsite.local/api/',
  webUrl: process.env.NODE_ENV === "production" ? 'https://mywebsite.live/' : 'http://mywebsite.local/'
}

Answer 2

Instead of hard-coding your environment variables into nuxt.config, I'd recommend checking out this dotenv nuxt module or using dotenv itself .

This way, you can have actual .env files setup on each environment you need, or, if you're using Netlify or something as such for your deployments, you can set up your environment keys using their tools too.

This would also avoid nested if-else statements if you start having multiple environments and will keep your code cleaner.

If you still want to hard-code it, then you could do what was already suggested in here and use if/else or ternary operations inside your nuxt-config, like:

env: {
  apiUrl: process.env.NODE_ENV === "production" ? 'https://mywebsite.live/api/' : 'http://mywebsite.local/api/',
  webUrl: process.env.NODE_ENV === "production" ? 'https://mywebsite.live/' : 'http://mywebsite.local/'
}

But then again, I do not recommend this approach.