Blank page on remote server when using Axios baseURL option

user_871404 0
Viewed 311

My app is blank/empty when deployed on remote server but works fine locally (same static site build in both cases). It works on remote server only if I provide the full absolute path in my Axios calls, however if I use Axios's baseURL option in nuxt.config.js then the app is blank on remote server.

What's going on?

.env:

BASE_URL=https://path.to.cdn

nuxt.config.js:

publicRuntimeConfig: {
  baseURL: process.env.BASE_URL,
  axios: {
    browserBaseURL: process.env.BASE_URL
  }
},
axios: {
  baseURL: process.env.BASE_URL,
},
nuxt.js vue.js environment-variables
2 Answers

On top of my comment above, I may add that this is a possible working and flexible configuration to have an axios working properly.

// nuxt.config.js
publicRuntimeConfig: {
  baseUrl: process.env.BASE_URL,
},

...

plugins: [
  '~/plugins/nuxt-axios.js',
],

// plugins/nuxt-axios.js
export default ({ $axios, $config: { baseUrl } }) => {
  $axios.defaults.baseURL = baseUrl
}

You may also try this alternative syntax as in the official docs: https://axios.nuxtjs.org/options#runtime-config

publicRuntimeConfig: {
  axios: {
    browserBaseURL: process.env.BROWSER_BASE_URL
  }
},
user_88165850

As said in the @nuxtjs/axios docs

Environment variable API_URL can be used to override baseURL.

So if you set API_URL and API_URL_BROWSER properly in your .env file then you don't need to explicitly set it in nuxt.config.js

After setting API_URL in your .env file if it does'nt work, try adding following code:

require('dotenv').config() to your nuxt.config.js.

In order to enable usage of dotenv

user_87706470
Related