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

[hyingreborn]

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,

[akauppi]

import.meta.env.MODE

[hyingreborn]

The previous code example was misspelled, now the console still print error :

SyntaxError: Cannot use 'import.meta' outside a module

[underfin]

The current scan env file need ensure root in vite.config.js first.If we support it,we need redefine the priority with env file and config file.

[Aferz]

@hyingreborn you can't use import.meta outside ES modules. In your example you are trying to access it in what looks like your vite.config.js

Your vite.config.js is used by a node process. There isn't any import.meta keyword there. You .env vars can't be accessed there for two reasons:

1. That is not an ES module.
2. Even being an ES module, vite hasn't loaded the vars yet.

If you want to check your environment (or mode) you can access process.env.NODE_ENV.

---

Once the vars are loaded, you could use the .env vars inside modules that are actually loaded by the browser, which is an ES environment (import.meta.env.blablabla). Hope I explained.

[hyingreborn]

@Aferz Thanks a lot for your explanation ! I've tried using process.env to get the environment variable, but it haven't NODE_ENV，there is also no variable prefixed by VITE_ 。
As a result, I was unable to change the configuration of vite. Config. js for different environments

[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.
}

[hyingreborn]

@Aferz Thanks a lot! Maybe someday Vite will be the same as VueCLI...

[Aferz]

Well, it already has almost 100% feature parity (when things make sense).

In Vue CLI you can't access you env vars in your vue.config.js either, for the same reason than vite.

Glad it helped. Cheers.

[yyx990803]

vite.config.js is executed in Node.js. Even though it allows ES import syntax, it's actually automatically transpiled into require() calls.

Mode and env variables are an "app level" concept - they are only usable inside your app source code, not the config file.

[softboy99]

Hi,
In Vue CLI, vue.config.js can use modes and environment variables, you can try vue cli 4.5.10 above. we should define the api base url in server.proxy, so it should be supported

[Darcrandex]

maybe it is helpful

function getEnv() {
  const envFilePath = path.resolve(__dirname, "./.env");
  try {
    let res = {};
    const data = fs.readFileSync(envFilePath, "utf8");

    data.split("\n").forEach((kv) => {
      const [key, value] = kv.replace(/\s*/g, "").split("=");
      if (key && value) {
        res[key] = value;
      }
    });

    return res;
  } catch (err) {
    console.error(err);
  }
}

const envs = getEnv();
console.log( envs.VITE_YOUR_KEY );

[yyx990803]

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

P.S this issue is way out of date.