title: using environment variables with vitejs and vuejs
body: <p>I'm trying to access environment variables at runtime in a Vue 3 application. I'm using vitejs for bundling.</p>
  <p>the application is deployed on AKS, and values are stored as Kubernetes secrets.</p>
  <p>I followed the instructions <a href="https://vitejs.dev/guide/env-and-mode.html" rel="nofollow noreferrer">here</a> and <a href="https://github.com/vitejs/vite/issues/562" rel="nofollow noreferrer">here</a></p>
  <p>I have a .env file that contains the env varibles I want to expose:</p>
  <pre><code>VITE_OKTA_CLIENT=$VITE_OKTA_CLIENT
  VITE_OKTA_ISSUER=$VITE_OKTA_ISSUER
  </code></pre>
  <p><code>$VITE_OKTA_ISSUER</code> is the env variable in my k8s pod with the actual value.</p>
  <p>and I try to use the variables like this:</p>
  <pre><code>import.meta.env.VITE_OKTA_CLIENT
  import.meta.env.VITE_OKTA_ISSUER
  </code></pre>
  <p>the value from the imports are undefined</p>
  <p>this is what my vitejs config looks like:</p>
  <pre><code>import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import vueI18n from '@intlify/vite-plugin-vue-i18n'
  const path = require('path')
  
  // https://vitejs.dev/config/
  export default defineConfig({
    resolve: {
      alias: {
        '@': path.resolve(__dirname, '/src'),
        '@okta/okta-auth-js': '@okta/okta-auth-js/dist/okta-auth-js.umd.js'
      }
    },
    optimizeDeps: {
      include: [
        '@vue/apollo-composable'
      ]
    },
    plugins: [
      vue(),
      vueI18n({
        include: path.resolve(__dirname, './src/locales/**')
      })
    ]
  })
  </code></pre>
  <p>In my Kubernetes config files I'm referencing the env like this:</p>
  <pre><code>spec:
        containers:
        - name: webapp
          env:
            - name: VITE_ROUTER_BASE
              value: /
            - name: VITE_OKTA_CLIENT
              valueFrom:
                secretKeyRef:
                  name: testsecret
                  key: VITE_OKTA_CLIENT
            - name: VITE_OKTA_ISSUER
              valueFrom:
                secretKeyRef:
                  name: testsecret
                  key: VITE_OKTA_ISSUER
  </code></pre>
  <p>Is my configuration missing anything? or is there a better way to do this?</p>