nuxt.js使用@nuxtjs/i18n

最新推荐文章于 2024-01-09 10:34:58 发布
最新推荐文章于 2024-01-09 10:34:58 发布
阅读量893 收藏 2
点赞数 1
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hh2993929/article/details/127809810
版权

第一步

安装依赖

npm install @nuxtjs/i18n

第二步

在plugins文件夹创建i18n.js文件

在这里插入图片描述

第三步修改nuxt.config.js

1.引入import i18n from ‘./plugins/i18n.js’
2.在modules中添加[‘@nuxtjs/i18n’,i18n],
在这里插入图片描述

第四步创建语言包

1.创建lang文件夹
在这里插入图片描述

2.在lang文件夹中创建js文件

在这里插入图片描述
在这里插入图片描述

第五步切换语言

在这里插入图片描述

使用

{{ $t('welcome') }}
this.$t('123')
{{$t(item.name)}}
呼3
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
i18n-module：用于Nuxt的i18n
02-06
i18n用于您的Nuxt项目 链接 :blue_book: :bookmark: :busts_in_silhouette: 产品特点 与集成 自动生成路线和自定义路径 搜索引擎优化 延迟加载翻译消息 基于自动检测语言的重定向 不同语言的不同域名 使用存储当前语言环境和消息 建立 yarn add nuxt-i18n # yarn npm i nuxt-i18n # npm 基本用法 首先，您需要将nuxt-i18n添加到Nuxt配置中。 // nuxt.config.js { modules : [ [ 'nuxt-i18n' , { locales : [ 'en' , 'es' ] , d
【Nuxt3.x结合i18n国际化】基础使用
songhannnn的博客
11-20 1121
说明：i18n配置中核心翻译配置来源与vueI18n的配置，这里导入同级目录下建立的i18n.config.ts文件。locales i18n中配置的所有语言 {0: 'en', 1: 'zh', 2: 'ja'}的strategy 为添加路由前缀的方式，通过改变i18n的locale语言跳转到语言前缀页。的strategy为无前缀模式（建议结合cookie存储，否则刷新页面回丢失设置的语言）// 用于把当前页面生成对应的语言前缀的路由,例如:/zh/,/zh/about。
nuxt-i18n-netlify-cms:添加Netlify CMS管理面板以管理i18n内容。 易于配置和维护更改。 目前，它仍在开发中
05-11
Nuxt i18n Netlify CMS模块 创建管理面板以使用Netlify CMS管理i18n内容 设置 将@robomx/nuxt-i18n-netlify-cms依赖项添加到您的项目中 yarn add @robomx/nuxt-i18n-netlify-cms # or npm install @robomx/nuxt-i18n-netlify-cms 添加@robomx/nuxt-i18n-netlify-cms对modules的部分nuxt.config.js { modules : [ // Simple usage '@robomx/nuxt-i18n-netlify-cms' , // With options [ '@robomx/nuxt-i18n-netlify-cms' , { /* module options */
developmint.de：使用Nuxt.js和TailwindCSS构建的开源公司页面
02-10
开发网站 我们的公司页面： 构建设置 # install dependencies $ npm install # Or yarn install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launch server $ npm run build $ npm start # generate static project $ npm run generate 安全 如果发现任何与安全相关的问题，请发送电子邮件至而不要使用问题跟踪器。 学分 执照 代码是根据MIT许可证（MIT）许可的。 除非另有说明，否则文字和信息内容为 。 除非另有说明，否则图形和图像均为 。 有关许可的详细信息可以在上找到
nuxt-sample:Vue.js，Vuex.js，Nuxt.js，Vuetify.js，i18n示例项目
03-22
样本 构建设置 # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launch server $ npm run build $ npm run start # generate static project $ npm run generate 有关工作原理的详细说明，请查看 。
nuxtjs配置i18n多语言、切换语言data中数据不起作用解决方案
HeXinT的博客
04-10 2848
将this.$t() 写到了data属性里，切换语言不起作用data是一次性生产的，你这么写只能是在 data 初始化的时候拿到这些被国际化的值，并不能响应变化。官方的解决办法是，建议我们将表达式写到computed属性里，不要写到data里。关于刷新页面 语言会重置为初始语言的问题 我不太清楚具体情况，但是原因可能是因为配置中的detectBrowserLanguage导致， 默认为true 跟随浏览器语言展示，改为false即可。
nuxt3 nuxtjs/i18n 配置
最新发布
block_xu的博客
01-09 1246
国际化页面配置成静态渲染（预渲染）页面，该选项会在打包时将页面预渲染成默认语言的html文件，访问该页面时服务端会直接返回当前html（因为与渲染会将函数执行，导致服务端返回的一直是默认语言的页面），最终导致页面语言和排版混乱。：cookie中没有设置值的话，默认使用此致（并不是默认。对应的值的效果，他会偶尔抽风，错误的去设置默认。总是重定向到存储在cookie中的值，：支持的语言列表，可以是数组或对象。：（必填）-区域设置的唯一标识符。需求允许的情况下，修改后调用。在需要切换国际化时，通过
【nuxt2/nuxt3】@nuxtjs/i18n国际化
m0_68324632的博客
12-09 6525
在网上阅读的大部分案例都还在使用vue-i18n插件做教程，实际上nuxt本身就已经基于vue-i18n封装了插件。而且它比vue-i18n封装了更多好用的功能，具体的使用方法我们可以查看但是官方好像没有做中文翻译，所以我在这里出了一篇中文教程，第一这个插件比vue-i18n用起来更方便，第二中文教程也方便大家快速使用上这个插件。
使用 Nuxt 内置 @nuxtjs/i18n 插件实现Nuxt国际化
Jesy_Hsu的博客
03-01 1108
使用 Nuxt 内置 @nuxtjs/i18n 插件实现Nuxt国际化
NUXT中使用 nuxtjs/i18n
lxRime的博客
07-19 2921
NUXT中使用nuxtjs/i18n
lodge92:Day.js，i18n，Nuxt.js，Strapi，TypeScript，Vuex
03-19
lodge92:Day.js，i18n，Nuxt.js，Strapi，TypeScript，Vuex
nuxt3.8配置 nuxtjs/i18n
weixin_42343410的博客
10-27 347
1.安装2.在根目录下创建 i18n.config.ts(js)2.1 自己国际化语言放的位置}))3.nuxt.config.ts 配置i18n:{4.组件中使用 ，页面中就会显示。
nuxtjs 国际化i18n
舜岳的博客
09-19 3300
1. 设置国际化匹配文字： locales/zh.json: (locales/en.json 英文同理) { "topbar": { "home": "首页", "pin": "沸点", "topic": "话题", "book": "小册", "search": "搜索" }, "menu": { "home": "我的主页", "label": "标签管理", "logout": "登出", "login": "
NuxtJs seo 国际化
weixin_44540722的博客
06-18 822
NuxtJs创建项目的选项说明文档。 创建完项目能运行即可。这里选用NuxtJs官方集成的Vuei18n插件。（网上各种自己集成的的真鸡儿麻烦） 安装完之后修改nuxt.config.js配置文件。 内容国际化 seo国际化 修改nuxt.config.js配置文件。 根据浏览器语言不同，标题会发生相对于的变化，其他seo属性酌情配置即可。......
nuxt 设置i18n后多语言文件不会动态更新
weixin_45641191的博客
06-26 718
nuxt.config 是nuxt 配置级别的文件，不由 webpack 处理，因此只会执行一次并且不会监视其中的导入引用。但是配完之后当我改多语言文件时就出现问题了，无论我怎么改，终端都不会HMR，怎么回事？原因是因为多语言文件是用require导入的，所以webpack不会监听本文件。昨天遇到的一个问题，然后研究了一整天，今天才得到解决。nuxt 设置i18n多语言时多语言文件不会动态更新。咋看之下，一点毛病也没有，官方文档就是这么配的。具体配置教程大家可以参考官网。
nuxt3集成i18
fllfllfll的博客
11-19 204
修改成功后在项目的地址后会自动配置当前语言的地址，默认语言没有地址，使用localePath跳转路由，使用switchLocalePath切换语言，两个函数都只是提供地址，如果需要跳转而且刷新页面建议使用localtion.replace()刷新页面,但是如果使用llayout,可能会导致请求发送时携带请求头的语言配置和当前语言不一样,可以先使用navigateTo跳转语言,不会刷新页面然后使用localtion.replace()刷新页面。跳转到新页面并切换语言同理。下面是两种我使用会报错的方式。
解决nuxt项目转为spa打包部署报错问题
FTEzreal的博客
09-27 626
解决nuxt项目转为spa打包部署报错问题
nuxt.js中使用i18n国际化、本地化
zhanghaoran
10-08 2788
nuxtjs中使用i18n 安装 vue-i18n npm install vue-i18n --save 在nuxtjs 中引入vue-i18n 在 ~/plugins文件夹下新建 i18n.js, 并键入以下代码： import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) export defaul...
Vue现有项目Nuxt改造实例解析
icarusliu的专栏
12-27 3980
本文主要讲述如何将一个现有的vue-cli项目按nuxt进行SSR改造。 nuxt官网文档有新项目使用nuxt的相关指南，如有相关需要的可以直接转移到官网了解 nuxt官网地址：nuxt官网 注意官网上相关文档基本都是英文的，如想看中文文档可以在w3cSchool上找到，地址：https://www.w3cschool.cn/nuxtjs/nuxtjs-b4kl36fw.html 1. 背景 今年自己完成了几个项目的开发，基本都是基于自己总结的一整套前后端基础应用来进行开发的，其中前端使用VUE+ele
nuxt3使用i18n
08-17
在Nuxt 3中使用i18n可以按照以下步骤进行配置： 1. 首先，在你的项目中安装vue-i18n依赖包。可以使用以下命令进行安装： ``` npm install vue-i18n ``` 2. 在项目根目录下创建一个plugins文件夹，然后在该文件夹中创建一个i18n.js文件。在该文件中，你可以配置你的i18n设置，例如语言包、默认语言等。以下是一个示例配置： ```javascript import { createI18n } from 'vue-i18n' const i18n = createI18n({ locale: 'en', messages: { en: { welcome: 'Welcome', ... }, zh: { welcome: '欢迎', ... } } }) export default i18n ``` 3. 接下来，打开你的nuxt.config.ts文件（或者是nuxt.config.js文件），并在plugins数组中添加刚刚创建的i18n.js文件的路径，例如： ```javascript export default defineNuxtConfig({ ... plugins: [ '@/plugins/i18n.js' ], ... }) ``` 4. 现在，你可以在你的组件中使用$i18n对象来访问你的翻译文本。例如，在模板中使用: ```html <template> <div>{{ $i18n.t('welcome') }}</div> </template> ``` 以上是在Nuxt 3中使用i18n的基本配置和使用方法。你可以根据自己的需求进行更详细的配置和定制。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [浅谈nuxt3+Element-plus+i18n国际化+tailwincss 实际项目出现的问题一览](https://blog.csdn.net/Mr_xiaopang19/article/details/125316163)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [尝试搭建 Vue3+nuxt3+typescript+vuex+i18n+axios+element plus+...(四) 之 i18n 国际化](https://blog.csdn.net/windbellxy/article/details/124244205)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值