nuxt.js使用@nuxtjs/i18n

最新推荐文章于 2024-09-03 08:53:00 发布
最新推荐文章于 2024-09-03 08:53:00 发布
阅读量958 收藏 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文件

在这里插入图片描述

最低0.47元/天 解锁文章
呼3
关注
在Nuxt.js中使用站点地图
ETHAN IN IT
01-20 1620
在本文中，我想研究使用sitemap module模块在Nuxt中创建站点地图的不同选项。 如果您要创建所有路线和页面的站点地图并添加动态路线，请求后端API，或者甚至要使用站点地图索引文件创建多个站点地图，此模块都将为您提供所需的一切。 内容 站点地图模块选项。 具有路线的简单单个站点地图。 从API请求的站点地图。 Sitemap中的几个索引。 多语言网站的站点地图。 模块选项 ...
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
NUXT中使用 nuxtjs/i18n
lxRime的博客
07-19 3030
NUXT中使用nuxtjs/i18n
Nuxt.js国际化插件i18n使用指南
gitblog_00694的博客
09-03 434
Nuxt.js国际化插件i18n使用指南 i18nI18n module for Nuxt项目地址:https://gitcode.com/gh_mirrors/i1/i18n 项目介绍 Nuxt.js 的 @nuxtjs/i18n 模块是为基于 Vue 和 Nuxt.js 构建的应用程序提供国际化的强大解决方案。它允许开发者轻松地实现多语言网站或应用，支持动态切换语言，并提供了丰富的配置选项来...
使用 Nuxt 内置 @nuxtjs/i18n 插件实现Nuxt国际化
Jesy_Hsu的博客
03-01 1328
使用 Nuxt 内置 @nuxtjs/i18n 插件实现Nuxt国际化
【nuxt2/nuxt3】@nuxtjs/i18n国际化
m0_68324632的博客
12-09 7811
在网上阅读的大部分案例都还在使用vue-i18n插件做教程，实际上nuxt本身就已经基于vue-i18n封装了插件。而且它比vue-i18n封装了更多好用的功能，具体的使用方法我们可以查看但是官方好像没有做中文翻译，所以我在这里出了一篇中文教程，第一这个插件比vue-i18n用起来更方便，第二中文教程也方便大家快速使用上这个插件。
nuxt3.8配置 nuxtjs/i18n
weixin_42343410的博客
10-27 454
1.安装2.在根目录下创建 i18n.config.ts(js)2.1 自己国际化语言放的位置}))3.nuxt.config.ts 配置i18n:{4.组件中使用 ，页面中就会显示。
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
01-21
<li><nuxt to={name:>HOME page</nuxt></li> <li><nuxt to={name:>NEWS page</nuxt></li> <li><nuxt to={name:>PLAY page</nuxt></li> </ul> 注意说明： to 前面有冒号“ : ” to 后面跟的是路径比如“/page/...
developmint.de：使用Nuxt.js和TailwindCSS构建的开源公司页面
02-10
如果发现任何与安全相关的问题，请发送电子邮件至而不要使用问题跟踪器。 学分 执照 代码是根据MIT许可证（MIT）许可的。 除非另有说明，否则文字和信息内容为 。 除非另有说明，否则图形和图像均为 。 有关许可...
nuxtjs 国际化i18n
舜岳的博客
09-19 3328
1. 设置国际化匹配文字： locales/zh.json: (locales/en.json 英文同理) { "topbar": { "home": "首页", "pin": "沸点", "topic": "话题", "book": "小册", "search": "搜索" }, "menu": { "home": "我的主页", "label": "标签管理", "logout": "登出", "login": "
Nuxt的国际化终极解决方案：I18n+Nuxt Content
m0_71867749的博客
01-18 2247
I18n是Nuxt国际化的必须的东西。它主要是提供了一套完整的国际化的解决方案，包括国际化路由、和基于国际化路由改变语言的方法。
nuxt3 nuxtjs/i18n 配置
block_xu的博客
01-09 1810
国际化页面配置成静态渲染（预渲染）页面，该选项会在打包时将页面预渲染成默认语言的html文件，访问该页面时服务端会直接返回当前html（因为与渲染会将函数执行，导致服务端返回的一直是默认语言的页面），最终导致页面语言和排版混乱。：cookie中没有设置值的话，默认使用此致（并不是默认。对应的值的效果，他会偶尔抽风，错误的去设置默认。总是重定向到存储在cookie中的值，：支持的语言列表，可以是数组或对象。：（必填）-区域设置的唯一标识符。需求允许的情况下，修改后调用。在需要切换国际化时，通过
nuxtjs-i18n + element 国际化
hello world
11-24 729
nuxtjs-18n新版可以通过在nuxt.config.js设定国际化，并不需要我们自己添加i18n.js文件进行处理 只需要建立lang文件夹，添加语言包即可 lang/en.js lang/zh.js 通常我们是在这两个文件中添加自己定义的语言包 当我们需要引入第三方插件的语言包时（比如element），我们是通过vue-i18n去进行配置 现在的话直接把语言包合并在lang文件夹下对应的文件中即可 import enLocale from 'element-ui/lib/locale
nuxt 多语言配置，nuxt + @nuxt/vuetify + @nuxt/i18n
qq_37201181的博客
10-07 2591
直接上配置 vue.config.js 配置片段 export default { // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins plugins: [ { src: '~/plugins/i18n.js' } //多语言配置文件 ], // Modules: https://go.nuxtjs.dev/config-modules modules: [ '
nuxtjs配置i18n多语言、切换语言data中数据不起作用解决方案
HeXinT的博客
04-10 3744
将this.$t() 写到了data属性里，切换语言不起作用data是一次性生产的，你这么写只能是在 data 初始化的时候拿到这些被国际化的值，并不能响应变化。官方的解决办法是，建议我们将表达式写到computed属性里，不要写到data里。关于刷新页面 语言会重置为初始语言的问题 我不太清楚具体情况，但是原因可能是因为配置中的detectBrowserLanguage导致， 默认为true 跟随浏览器语言展示，改为false即可。
【Nuxt3.x结合i18n国际化】基础使用
songhannnn的博客
11-20 3268
说明：i18n配置中核心翻译配置来源与vueI18n的配置，这里导入同级目录下建立的i18n.config.ts文件。locales i18n中配置的所有语言 {0: 'en', 1: 'zh', 2: 'ja'}的strategy 为添加路由前缀的方式，通过改变i18n的locale语言跳转到语言前缀页。的strategy为无前缀模式（建议结合cookie存储，否则刷新页面回丢失设置的语言）// 用于把当前页面生成对应的语言前缀的路由,例如:/zh/,/zh/about。
nuxt使用i18n进行中英文切换
leng0920的博客
10-19 1107
nuxt使用i18n进行中英文切换
nuxt3 i18n
最新发布
09-21
在项目根目录下运行 `npm install @nuxtjs/i18n` 或者 `yarn add @nuxtjs/i18n`。 2. 配置文件（通常是 `nuxt.config.js`）： ```javascript import { createI18n } from '@nuxtjs/i18n' export default { /...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值