在 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 pod 中的 env 变量及其实际值。

我尝试使用这样的变量：

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

我的配置是否缺少任何内容？或者有更好的方法来做到这一点吗？