如何在 Nuxt 的 .js 文件中访问环境变量

Question

我有以下文件：

// nuxt.config.js
import { locales } from './services/i18n'
...
    i18n: {
        lazy: true,
        langDir: '~/locales/',
        defaultLocale: 'en',
        detectBrowserLanguage: false,
        differentDomains: true,
        locales,
        vueI18n: {
            fallbackLocale: 'en'
        }
    },
    publicRuntimeConfig: {
        ...
        subDomain: process.env.SUB_DOMAIN,
    },
...

// services/i18n/index.js
export const locales = [
    {
        code: 'ar',
        iso: 'ar',
        file: 'ar.json',
        dir: 'rtl',
        domain: `${process.env.SUB_DOMAIN}.example.ae`,
        name: 'العَرَبِيَّة',
        enName: 'Arabic',
        defaultLanguage: true,
        languages: ['ar']
    },
    {
        code: 'bg',
        iso: 'bg',
        file: 'bg.json',
        dir: 'ltr',
        domain: `${process.env.SUB_DOMAIN}.example.bg`,
        name: 'Български',
        enName: 'Bulgarian',
        defaultLanguage: true,
        languages: ['bg']
    },
    ...
]

问题是 process.env.SUB_DOMAIN 似乎在 /services/i18n/index.js 中未定义，尽管它被设置是因为在 nuxt.config.js 中没有未定义相同的变量。我知道 nuxt 将 publicRuntimeConfig 的值公开为 $config，但是 $config 在 /services/i18n/index.js 中不可访问。如果我将 locales 移动到 nuxt.config.js，它可能会起作用，但我不想这样做，因为它会降低配置文件的可读性。

所以我的问题是在 /services/i18n/index.js.

中获取子域的最佳方法

Answer 1

编辑：Alexander Lichter 在 Nuxtjs 的讨论中给出了一个很好的答案：https://github.com/nuxt/nuxt.js/discussions/9289#discussioncomment-729801

// nuxt.config.js
import { locales } from './services/i18n'
...
    i18n: {
        lazy: true,
        langDir: '~/locales/',
        defaultLocale: 'en',
        detectBrowserLanguage: false,
        differentDomains: true,
        locales: locales(process.env.SUB_DOMAIN),
        vueI18n: {
            fallbackLocale: 'en'
        }
    },
    publicRuntimeConfig: {
        ...
        subDomain: process.env.SUB_DOMAIN,
    },
...

// services/i18n/index.js
export const locales = domain => [
    {
        code: 'ar',
        iso: 'ar',
        file: 'ar.json',
        dir: 'rtl',
        domain: `${domain}.example.ae`,
        name: 'العَرَبِيَّة',
        enName: 'Arabic',
        defaultLanguage: true,
        languages: ['ar']
    },
    {
        code: 'bg',
        iso: 'bg',
        file: 'bg.json',
        dir: 'ltr',
        domain: `${domain}.example.bg`,
        name: 'Български',
        enName: 'Bulgarian',
        defaultLanguage: true,
        languages: ['bg']
    },
    ...
]

如何在 Nuxt 的 .js 文件中访问环境变量

How to access environment variables in a .js file in Nuxt

javascript

environment-variables

nuxt.js

nuxt-i18n