vuejs3 and vite import.meta.env.VITE_BASE_URL not working

Hello I'm trying to get base url from .env file. And I'm getting undefined. I have tried some stack overflow answers and documentation but it didn't help.

console.log('env', import.meta.env.VITE_BASE_URL)

My .env file.

And I don't understand why this works?

console.log('env', import.meta.env.BASE_URL)

Few things to double-check so that we're sure that it works well:

• .env is at the root of your project (aka at the same level as package.json, .gitignore etc)
• prefer using a double quote for your variables aka VITE_NICE="hello"

Then, this should be working well in any .vue file

<script setup>
console.log('env', import.meta.env.VITE_NICE)
</script>

Official docs page.

This is how the directory should look like (aka .env should be outside of the src directory).