【NUXT】nuxt 国际化 注意事项

最近公司有一个官网项目需要增加多语言,项目使用的是vue + nuxt + iview 框架。

安装依赖 npm install --save vue-i18n

根据nuxt官网的国际化demo,完成项目的国际化部署。

官网Demo : https://zh.nuxtjs.org/examples/i18n

其中要注意的几点

1、nuxt.config.js 中

plugins: [
    {
      src: '~plugins/i18n.js',
      // ssr: false    这个东西一定不要加,加上的话即便值为false,也会报错,i18n 失效
    },
    {
      src: '~plugins/vue-iview',
      ssr: false
    }
  ],

2、为了能够做到切换语言时页面不抖动,刷新后页面保持当前的语种,那么请一定按照官网Demo的示例来切换语种

<!-- 以下示例中文为默认语种 -->

<!-- 第一种方式,在HTML中直接切换语种 -->

<nuxt-link :to="$route.fullPath.replace(/^\/[^\/]+/, '')" >中文</nuxt-link>
<nuxt-link :to="`/fr` + $route.fullPath" >法语</nuxt-link>


<!-- 第二种方式,通过点击事件切换语种 -->

<nuxt-link @click="changeLanguage('zh')">中文</nuxt-link>
<nuxt-link @click="changeLanguage('fr')">法语</nuxt-link>

<script>
    methods: {
        changeLanguage(language) {
          let locale = this.$store.state.locale
          if (language === 'zh') {
            this.$router.push(this.$route.fullPath.replace(/^\/[^\/]+/, ''))
          } else if (language === 'en') {
            // 防止重复点击
            if(locale !== 'en'){
              this.$router.push(`/en` + this.$route.fullPath)
            }
          }
        }
    }
</script>

3、在pages下创建_lang文件夹,名称必须是_lang,将pages下已有项目全部拷贝至_lang文件夹内,然后在原有页面中写如下代码引入_lang 文件夹内的页面

<script>
import Index from '~/pages/_lang/index'
export default Index
</script>

4、nuxt 国际化 的跳转以及传参 

      注意,path后的路径开头不要加  “ / ” 

<!-- 跳转页面 -->
<nuxt-link :to="$i18n.path('home/index')" >跳转</nuxt-link>
<!-- 携带参数 -->
<nuxt-link :to="{path:$i18n.path('home/index'), query:{id:xxx}}" >跳转</nuxt-link>

<script>
    // 跳转页面
    this.$router.push(this.$i18n.path("home/index"))
    // 携带参数
    this.$router.push({ path: this.$i18n.path("home/index"), query:{id: 'xxxx'} })
</script>

其余的按照官网Demo照搬即可

如此配置后,项目的国际化已经部署完毕

nuxt中i18n的使用方法:

1、在template中使用i18n

<h1>{{ $t('home.title') }}</h1>

2、在.vue页面中的script内使用i18n

data() {
    return {
        title: this.$t('home.title')
    }
}

3、在.js页面中使用i18n (.js页面中没有vue实例,所以this.$t失效)(不推荐)

1、在layouts文件夹下的default.vue的mounted中将i18n挂载到window上

      或者 挂载到 plugins 下的 i18n.js 内

// default.vue
mounted() {
    window.vm = this.$i18n
}

2、在.js页面内使用

// test.js

if (process.browser) { //判断是否在浏览器环境下
    let vm = window.vm
    let data = {
        home:vm.t('home.title'),
    }
}

不过经测试会偶发静态资源加载快于window挂载i18n的速度,导致window上还未成功挂载i18n,静态资源就开始使用的情况。

最后一种方案

所以我最终采用最保险的方式实现静态资源中英版的替换

1、将静态资源的中英两个版本同时引入到该页面

2、判断locale的值,如果是中文就使用中文版的静态资源赋值,如果是英文就采用英文版的静态资源赋值

实现如下:

import ChineseData form '~/static/assets/libs/staticData_zh.js' // 中文资源
import EnglishData form '~/static/assets/libs/staticData_en.js' // 英文资源

export default {
    components: {},
    data() {
        return {
            text: {}
        }
    },
    created() {
        //判断当前语言环境,进行静态资源的赋值
        let locale = this.$store.state.locale
        if (locale === 'zh') {
          this.text = ChineseData.text
        } else if (locale === 'en') {
          this.text = EnglishData.text
        }
    }
}

初次接触NUXT,有很多不是特别透彻的地方,如果有更好的建议,欢迎评论~  

如果能够帮到你,可以给我一个赞吗? 不胜感激~

Nuxt.js 3 的国际化功能允许开发者轻松地将应用程序配置为支持多种语言,包括阿拉伯语。以下是关于如何在 Nuxt3 实现国际化的步骤及关键点: ### 配置国际化 1. **安装 i18n 插件**:首先需要安装 `@nuxt-i18n/nuxt` 或其他兼容的国际化插件。 ```bash npm install @nuxt-i18n/nuxt ``` 2. **设置国际化文件**:创建或编辑 `i18n` 目录下的 `.json` 文件(例如 `en.json`, `ar.json`),分别包含各个语言的资源和翻译内容。例如: ```json "ar": { "hello": "مرحبا" } ``` 3. **配置 Nuxt 应用程序**:在 `nuxt.config.js` 添加国际化配置: ```javascript export default { //... i18n: { locales: ['en', 'ar'], strategy: 'prefix_except_default', vueI18n: { fallbackLocale: 'en', messages: { en: require('./content/i18n/en.json'), ar: require('./content/i18n/ar.json') }, } }, //... }; ``` 4. **使用国际化**:在组件通过 `useI18n()` 指令获取当前语言环境的翻译字符串。 ```vue <script setup lang="ts"> import { useI18n } from 'vue-i18n' const { t } = useI18n() defineProps<{ locale?: string; }>() if (locale) { useRouter().push({ path: '/' + locale }) } </script> <template> {{t('hello')}} </template> ``` 5. **处理页面跳转和路径**:确保应用能够根据用户的首选语言自动调整 URL 和路径。 以上步骤说明了如何基本配置 Nuxt3 的国际化,并支持阿拉伯语和其他语言。需要注意的是,实际项目可能还需要考虑更多的细节,比如语言切换、用户偏好设置以及国际化资源的管理等。 ### 关联问题: 1. **如何优化国际化性能**? 2. **如何解决国际化过程遇到的语言冲突**? 3. **Nuxt3 是否支持动态选择语言**?
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值