我正在尝试在 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
我的配置是否缺少任何东西?还是有更好的方法来做到这一点?