Question: How to use modes and environment variables in vite.config.js ?

I try to use env variables in vite.config.js like this:

const isDev1 = import.meta.env.MODE === 'development'
const isDev2 = process.env.MODE === 'development'
const dev_port1 = import.meta.env.VUE_DEVPORT
const dev_port2 = process.env.VUE_DEVPORT
module.exports = {
    base: './',
    port: dev_port1,
    sourcemap: isDev1,
    optimizeDeps: {
        include: ['axios']
    }
}

Environment variables cannot be accessed either way,

[Aferz]

@hyingreborn you are right about NODE_ENV. It’s not set yet in vite.config.js. I don’t know if it intentional by design but you could create your own scripts in your package.json:

"scripts": {
    "build:dev": "APP_ENV=development vite build",
    "build:prod": "APP_ENV=production vite build",
}

In your vite.config.js, now you can manipulate it:

const mode = process.env.APP_ENV // This now exists.

module.exports = {
  mode: mode, // This will set the mode, to avoid confusions.
}

[yyx990803]

https://vitejs.dev/config/#conditional-config

P.S this issue is way out of date.