正文 

当前位置： 首页 > 问答 >

Vue-Router 和 i18n 与 Nuxt

     2023-02-22     98

关键词：

【中文标题】Vue-Router 和 i18n 与 Nuxt【英文标题】：Vue-Router and i18n with Nuxt 【发布时间】：2021-03-02 20:48:42 【问题描述】：

我正在将一个带有 vue-router 的项目从 Vue.js 转移到 Nuxt.js。

经过数小时的尝试和谷歌搜索，我设法让一切正常工作，但有一个我无法工作的问题：**将 i18n 和 vue-router 与 Nuxt.js 集成**

我还没有解决的两个问题：

    如何在我的 router.js 文件中正确更新 i18n.locale？ 如何告诉 nuxt-i18n 我正在使用自己的路由器？它现在显然抱怨Route with name 'XXX___en' does not exist 的每个页面。

在我的普通 vue 项目中，以下代码有效，我可以更改 router.js 中的语言环境，它会传播和更新 this.$i18n。

i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

import termsHTML from './translations/terms'
import privacyHTML from './translations/privacy'
import imprintHTML from './translations/imprint'

Vue.use(VueI18n)

export const i18n = new VueI18n(
  locale: 'en',
  fallbackLocale: 'en',
  messages:  ...

路由器.js

...
import 
  i18n
 from "@/plugins/i18n.js";
...
router.beforeEach((to, from, next) => 
// Set locale to new language
// I CANT GET THIS NEXT LINE WORING IN NUXT.JS
if (i18n.locale !== lang) i18n.locale = lang
...

现在在 Nuxt，我也想做同样的事情。我在 nuxt.config.js 中导入了这样的 nuxt-i18n 插件：

['nuxt-i18n', 
  seo: true,
  locales: [
    code: 'en',
    name: '????????',
    iso: 'en-US'
  ,
  
    code: 'de',
    name: '????????',
    iso: 'de-DE'
  ],
  defaultLocale: 'en',
  vueI18n: 
    locale: 'en',
    fallbackLocale: 'en',
    messages: translations
  
],

我在路由器中尝试了以下操作，但没有成功。

路由器.js

import nuxtConfig from "~/nuxt.config";
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// access the i18n module which is the second item in the modules array
// then take second item which is the config object and take the vueI18n property
let i18n = nuxtConfig.modules[1][1].vueI18n
...
if (i18n.locale !== lang) i18n.locale = lang

这不会出错，但也不起作用。 Vue.use() 在这里可能是错误的，因为它注册了一个新组件，我猜我的代码没有引用正确的 i18n？

感谢您的帮助

【问题讨论】：

路由器文件里为什么需要i18​​n？ 我想重定向到 /en/ 或 /de/ 等等，具体取决于浏览器语言。并设置语言环境。 【参考方案1】：

我现在得到了我想要的东西，不是在路由器文件中而是在始终加载的 NavBar.vue 组件中进行重定向。在那里你可以毫无问题地访问 this.$i18n。

【讨论】：

【参考方案2】：

它对我有用：

      
        path: '/:lang([a-z]0\,2)/blog/authors',
        component: AuthorsList
      ,

【讨论】：

nuxt i18n 号码本地化

】nuxti18n号码本地化【英文标题】：nuxti18nnumberlocalization【发布时间】：2019-08-2122:52:46【问题描述】：如何在Nuxt中配置数字本地化？我的nuxt.config是这样的modules:[[\'nuxt-i18n\',locales:[code:\'en\',iso:\'en-US\',file:\'en-US.js\'lazy:true,langDir:\'la... 查看详情

Nuxt i18n 在语言切换时重置数据对象

】Nuxti18n在语言切换时重置数据对象【英文标题】：Nuxti18nresetsdataobjectonlanguageswitch【发布时间】：2020-06-2021:51:46【问题描述】：我一直在将nuxt-i18n集成到我的一个项目中以启用多种语言。一切正常，但是当我在填写表单时切换语... 查看详情

完全动态的 vue-router

】完全动态的vue-router【英文标题】：Fullydynamicvue-router【发布时间】：2019-06-0514:39:09【问题描述】：我们正在基于Vue和Nuxt构建一个庞大的网站，其中包含超过25种不同的页面类型，这些页面类型无法与VueRouter开箱即用的标准/:id或... 查看详情

我可以在 nuxt.config.js 中访问 nuxt 上下文吗？

...布时间】：2020-07-1204:42:21【问题描述】：我正在使用nuxt-i18n和@nuxtjs/auth，我想像这样配置auth.redirect选项来支持i18n：//nuxt.config.jsexportdefaultmodules:[\'@nuxtjs/auth\' 查看详情

如何将 axios/axios 拦截器全局附加到 Nuxt？

...将axios/axios拦截器全局附加到nuxt（因此它无处不在），与i18n的附加方式相同？我的想法是我想要一个全局axios拦截器，每个请求都通过该拦截器。谢谢【问题讨论】：【参考方案1】：您可以创 查看详情

nuxt 与 locomotive-scroll 和 gsap 问题有关的路线更改

】nuxt与locomotive-scroll和gsap问题有关的路线更改【英文标题】：nuxtwithlocomotive-scrollandgsapissueonroutechange【发布时间】：2021-12-0219:27:44【问题描述】：我一直在努力使用机车滚动和gsapscrollTrigger和Scrollproxy在我的Nuxtjs项目上实现平滑... 查看详情

ngx-translate 与 i18n 的区别

】ngx-translate与i18n的区别【英文标题】：Differencesngx-translatevsi18n【发布时间】：2017-12-0822:33:32【问题描述】：翻译一个（Angular）应用程序有多种方法，主要的方法是：ngx-translate和Angular2nativei18n据我了解，i18n对SEO来说更容易，因... 查看详情

Nuxt auth 与passportjs？

】Nuxtauth与passportjs？【英文标题】：Nuxtauthwithpassportjs?【发布时间】：2020-06-1112:58:01【问题描述】：nuxtauthModule(front-end)和passport-local如何使用JWT(back-endexpress)？定义jwt策略以验证jwt令牌（快递）varJwtStrategy=require(\'passport-jwt\').Strate... 查看详情

为啥将 Apollo 与 Nuxt 一起使用需要 graphql-tag？

】为啥将Apollo与Nuxt一起使用需要graphql-tag？【英文标题】：Whyisgraphql-tagneededtouseApollowithNuxt?为什么将Apollo与Nuxt一起使用需要graphql-tag？【发布时间】：2021-09-1310:28:30【问题描述】：我试图理解为什么大多数关于Nuxt和Apollo的教程... 查看详情

为啥 vue-splide 不能与 Nuxt2 一起使用？

】为啥vue-splide不能与Nuxt2一起使用？【英文标题】：Whyisvue-splidenotworkingwithNuxt2?为什么vue-splide不能与Nuxt2一起使用？【发布时间】：2022-01-0616:07:48【问题描述】：我正在尝试将Vue-Splide添加到我的Nuxt项目中，在followingtheVue-Splidedocu... 查看详情

SyntaxError：将 lodash 与 Nuxt 一起使用时出现意外的令牌导出

】SyntaxError：将lodash与Nuxt一起使用时出现意外的令牌导出【英文标题】：SyntaxError:UnexpectedtokenexportwhenusinglodashwithNuxt【发布时间】：2019-04-0412:37:10【问题描述】：这是我的repo和现场演示https://github.com/alechance/nuxt-lodash。我将Nuxt与V... 查看详情

Nuxt.js 中的“文档未定义”

...e组件中使用Choices.js。组件编译成功，但随后触发错误：[vue-router]无法解析异步组件默认值：ReferenceError:文档未定义在我看到的浏览器中：ReferenceError文档未定义我认为这与Nuxt. 查看详情

vue 3 vite 与 i18n 的国际化

】vue3vite与i18n的国际化【英文标题】：Internationalizationforvue3vitewithi18n【发布时间】：2021-06-1807:29:37【问题描述】：我目前正在尝试使用“@intlify/vite-plugin-vue-i18n”将我的vue3vite项目国际化。我在这里面临的问题是，我目前必须为... 查看详情

在静态模式下使用 Nuxt 和 Firebase Nuxt 模块进行身份验证中间件

】在静态模式下使用Nuxt和FirebaseNuxt模块进行身份验证中间件【英文标题】：AuthmiddlewarewithNuxtandFirebaseNuxtModuleinStaticMode【发布时间】：2021-08-2619:25:13【问题描述】：我正在尝试在Nuxt应用程序中实现Firebase（静态）。我安装了@nuxtjs... 查看详情

Nuxt.js 中的组件可以与 Next.js 类似的客户端渲染和服务器渲染混合使用吗？

】Nuxt.js中的组件可以与Next.js类似的客户端渲染和服务器渲染混合使用吗？【英文标题】：CanyoumixupClientrenderingandServerrenderingforcomponentsinNuxt.jssimilartoNext.js?【发布时间】：2021-08-2707:47:41【问题描述】：在Next.js中，您可以在同一页... 查看详情

如何管理来自 API 的大量路由及其与 Nuxt 路由器模块的组件关联

】如何管理来自API的大量路由及其与Nuxt路由器模块的组件关联【英文标题】：HowtomanagebunchofroutesfromAPIandtheircomponentassociationwithNuxtroutermodule【发布时间】：2020-10-0608:13:28【问题描述】：您好，亲爱的Nuxt/Vue/Node社区，我在我的Nuxt.j... 查看详情

将 Jest 与 Nuxt 组件一起使用时无法读取未定义的属性 $loading

】将Jest与Nuxt组件一起使用时无法读取未定义的属性$loading【英文标题】：Cannotreadproperty$loadingofundefinedwhenusingJestwithNuxtcomponent【发布时间】：2019-07-2706:11:41【问题描述】：当我尝试使用nuxt和jest测试我的一个组件时，我收到以下... 查看详情

TipTap 和 Nuxt - 无法从非 EcmaScript 模块导入命名导出“module”

】TipTap和Nuxt-无法从非EcmaScript模块导入命名导出“module”【英文标题】：TipTapandNuxt-Can\'timportthenamedexport\'module\'fromnonEcmaScriptmoduleTipTap和Nuxt-无法从非EcmaScript模块导入命名导出“module”【发布时间】：2020-05-0209:20:26【问题描述】... 查看详情