vue.js - 如何为静态资源文件配置 nuxt-i18n？

Question

请注意，我在根“static”目录中包含了一些 js 文件，如下所示。

head: {
script: [{
    type: 'text/javascript',
    src: 'js/jquery.min.js',
    body: true
  },
  {
    type: 'text/javascript',
    src: 'js/bootstrap.min.js',
    body: true
  },
  {
    type: 'text/javascript',
    src: 'js/slick.min.js',
    body: true
  },
  {
    type: 'text/javascript',
    src: 'js/script.js',
    body: true
  }
]},

配置i18n如下

i18n: {
    locales: [{
        code: 'en',
        name: 'English',
        file: 'en-US.js'
      },
      {
        code: 'ar',
        name: 'Arabic',
        file: 'ar-AR.js'
      }
    ],
    defaultLocale: 'en',
    lazy: true,
    langDir: 'lang/',
    defaultLocale: 'en',
    vueI18n: {
      fallbackLocale: 'en'
    }
  },

使用 en 加载 js 文件没有问题，但是当我从 en 切换到 ar 时，浏览器控制台会为静态目录中的所有包含文件提供以下错误。

GET http://localhost:3000/ar/js/jquery.min.js net::ERR_ABORTED 404 (Not Found)

Answer 1

不确定设置为英语时这是如何工作的，但如果您有 langDir: 'lang/'，您的文件应该位于项目的根目录中 lang 目录(与 package.json、nuxt.config.js 等处于同一级别)。

我什至不确定第一个片段是什么。

这是我的 nuxt-i18n 配置

[
  'nuxt-i18n',
  {
    defaultLocale: FRENCH_LOCALE,
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'detected_locale',
      fallbackLocale: FRENCH_LOCALE,
    },
    strategy: 'no_prefix',
    vueI18n: {
      fallbackLocale: FRENCH_LOCALE,
      silentFallbackWarn: process.env.NODE_ENV === 'production',
      silentTranslationWarn: process.env.NODE_ENV === 'production',
      warnHtmlInMessage: 'error',
      escapeParameterHtml: true,
    },
    vueI18nLoader: true,
    vuex: {
      syncLocale: true,
      // syncMessages: true,
      syncRouteParams: false,
    },
    lazy: true, // not really working: https://github.com/nuxt-community/i18n-module/issues/905
    langDir: 'locales/',
    locales: [
      {
        code: 'en',
        file: 'en.json',
        iso: 'en',
      },
      {
        code: 'fr',
        file: 'fr.json',
        iso: 'fr',
      },
    ],
  },
],

我的 i18n 文件位于根级别的 /locales 。

PS:我不确定为什么您的文件在 static 文件夹中公开可用。有什么具体原因吗？

---

编辑回答评论中的一些问题。

static directory用于共享一些公共(public)文件，可以通过搜索引擎、一些网站图标等访问。它们不用于加载任何类型的脚本。

像 Boostrap 之类的包可以通过官方 modules way 访问，这是官方文档中的示例:https://bootstrap-vue.org/docs#nuxtjs-module 。这是为了快速、简单地设置 Nuxt 的一些软件包。

如果您想将软件包添加到整个应用程序中，您可以直接在 head-script 中加载脚本。 。这通常不是推荐/官方方式，并且不不应该用于从 CDN 加载某些库(尤其是 Nuxt 应用程序中的 jQuery)。

---

当然，上面所有 3 段都完全与如何配置 nuxt-i18n 语言环境无关，只是需要明确一下。