vue.js - vitejs および vuejs で環境変数を使用する

Question

Vue 3 アプリケーションで実行時に環境変数にアクセスしようとしています。バンドルにはvitejsを使用しています。

アプリケーションは AKS にデプロイされ、値は Kubernetes シークレットとして保存されます。

こことここの指示に従いました

公開したい環境変数を含む .env ファイルがあります。

VITE_OKTA_CLIENT=$VITE_OKTA_CLIENT
VITE_OKTA_ISSUER=$VITE_OKTA_ISSUER

$VITE_OKTA_ISSUERは、実際の値を持つ k8s ポッドの環境変数です。

そして、私は次のような変数を使用しようとします:

import.meta.env.VITE_OKTA_CLIENT
import.meta.env.VITE_OKTA_ISSUER

インポートからの値は未定義です

これは私のvitejs構成がどのように見えるかです:

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/**')
    })
  ]
})

私の Kubernetes 構成ファイルでは、次のように env を参照しています。

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

私の構成に何か欠けているものはありますか? またはこれを行うためのより良い方法はありますか？