Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Unable to use .env files with Vite and Vue 3

I am using Vue 3 with vite as my dev server… I have two .env files configured for my vite setup, .env and .env.development, and I seem unable to use the variables within them…

.env

VITE_API_KEY="1234"
VITE_API_URL="https://www.myapi.com"

.env.development

VITE_API_KEY="5678"
VITE_API_URL="https://www.staging.myapi.com"

Could someone help me understand why when I use my variables like this import.meta.env.VITE_API_URL, I just get this in the console;
Cannot read properties of undefined (reading 'VITE_API_URL'), and if i use process. I get Process is undefined.

I’d also like to add I’m not using dotenv or anything like that…

Good trawl around StackOverflow, but nothing has helped me so far…

I would appreciate any help

Tags:

2

Answers


  1. 0

    install this two package

    env-cmd,
dotenv

    package.json file add this cmd

    script:{    
    "local": "env-cmd -f .env vite",
    "dev": "env-cmd -f .env.development vite", 
    //Other
}

    using

    const ApiBaseUrl = import.meta.env.VITE_BASE_URL

    local env run that time run npm run local development env run that time npm run dev

    Login or Signup to reply.
  2. 0

    In a Vue 3 project using Vite, you can access environment variables defined in your .env and .env.development files using import.meta.env for Vite-specific variables. The error you are encountering, "Cannot read properties of undefined (reading ‘VITE_API_URL’)" indicates that the import.meta.env is not being recognized, which might suggest an issue with the way you are trying to access the variables.

    Here’s how you should be able to access these variables in your Vue 3 components and modules:

    1. Define .env Files:

    First, ensure your .env and .env.development files are correctly defined:

    .env File:

    VITE_API_KEY="1234"
VITE_API_URL="https://www.myapi.com"

    .env.development File:

    VITE_API_KEY="5678"
VITE_API_URL="https://www.staging.myapi.com"

    2. Access Environment Variables:

    In your Vue 3 components or modules, you can access these environment variables using import.meta.env:

    // Accessing API Key
const apiKey = import.meta.env.VITE_API_KEY;

// Accessing API URL
const apiUrl = import.meta.env.VITE_API_URL;

    3. Check for Typos or Mistakes:

    Double-check for any typos or mistakes in your code. The import.meta.env should be available by default in Vite projects, so the error might be due to incorrect usage.

    4. Usage in Vue Components:

    For Vue components, you might want to use these variables in the setup() function or in the template. Here’s an example:

    Example Component

    <template>
  <div>
    <p>API Key: {{ apiKey }}</p>
    <p>API URL: {{ apiUrl }}</p>
  </div>
</template>

<script>
export default {
  setup() {
    const apiKey = import.meta.env.VITE_API_KEY;
    const apiUrl = import.meta.env.VITE_API_URL;

    return {
      apiKey,
      apiUrl,
    };
  },
};
</script>

    5. Restart the Vite Server:

    After making changes to your .env files, make sure to restart your Vite server for the changes to take effect:

    npm run dev

    Troubleshooting:

    If you’re still facing issues, here are a few things to check:

    • Check Environment Mode: Ensure that you are running in the correct environment mode. .env will be used for production, and .env.development for development. If you are running in development, the variables from .env.development should be used.

    • Vite Version: Make sure you are using a version of Vite that supports import.meta.env (it should be supported in Vite 2.x and above).

    • Clear Cache: Sometimes, clearing the browser cache or restarting the development server can resolve issues with environment variables not updating.

    By following these steps, you should be able to access your environment variables in your Vue 3 components and modules when using Vite as your dev server.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search