vue3使用i18n必须使用9.*版本 

 "vue-i18n": "^9.2.2"

目录

1、下载使用

1.1、创建配置

1.2、基本使用

1.3、这时会有一个警告

2、插值

2.1、 命名插值

2.2、列表插值

2.3、文字插值

3、messages

3.1、Linked messages(关联信息)

3.2、Built-in Modifiers(内置修改器)

3.3、自定义修饰符

3.4、HTML messages(HTML信息)

4、Pluralization(多元化)


1、下载使用

npm 

npm install vue-i18n@9

yarn 

yarn add vue-i18n@9

 lang

1.1、创建配置

创建 lang 文件夹,然后再里面创建 cn.ts ,en.ts 和最重要的 index.ts

cn.ts  

const messages = {
  home: {
    title: '书城',
    hint: '计算机科学和软件工程',
    guessYouLike: '猜你喜欢'
  }
}

export default messages

 en.ts

const messages = {
  home: {
    title: 'Book Store',
    hint: 'Computer Science And Software Engineering',
    guessYouLike: 'Guess You Like',
  }
}

export default messages

index.ts 

import { createI18n } from 'vue-i18n'
import en from './en'
import cn from './cn'

//引入的不同语言文件
const messages = {
  en, cn
}

//这个类型可以自己配置,毕竟每个人做的都不一样
const i18n:any =createI18n( {
  legacy: false,         // 使用 Composition API 模式,则需要将其设置为false
  globalInjection: true, //全局生效$t
  locale: 'cn',          // 默认cn翻译
  messages               //ES6解构
})

export default i18n;

 如果还要配置其它文件可以加

vue的 main.ts 

import { createApp } from 'vue'
import App from './App.vue'

import i18n  from './lang/index.js'  

const app =  createApp(App)

app.use(i18n);  
app.mount('#app')

1.2、基本使用

在任意组件上,后面都是展示的也一样

使用参数:

- path: 必传的,  locale 信息的键

- locale: 可选, 语言环境 (这个已经在1.1那配置好了,可以通过pinia或storage修改)

- args: 可选, 用于列表或命名格式(在2.0有说)

<template>
  //使用  $t
  <span> {{ $t("home.title") }} </span>
  //使用 t (要解构)
  <p>{{t("home.title")}}</p>

  //使用v-t , 这个数据是没有的,只是用来展示如何使用v-t
  <p v-t="{path:'title',args: {count: 10 }}"></p>

  //使用翻译组件
  // keypath:必传,和上面path参数一样   tag:可选,转为什么标签
  // locale:可选,要用哪个语言环境    scope:可选,全局还是局部 `global` or `parent`
  //  i18n:可选,优先级比scope高,参数也多,用的也不多,就不介绍了
  <i18n-t keypath='home.title' tag="p" locale='en' scope="global"></i18n-t>

</template>
<script setup lang='ts'>

import { useI18n } from 'vue-i18n'
const { t } = useI18n()

</script>
<style lang='less' scoped></style>

1.3、这时会有一个警告

警告:You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.

 安装

npm install @intlify/vite-plugin-vue-i18n

vite.config.ts 

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueI18n from '@intlify/vite-plugin-vue-i18n'

//引入resolve 
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
  //配置vueI18n
  vueI18n({
    include: resolve(__dirname, './path/to/src/locales/**')
  })]
})

警告解决方案来之星空小屋

2、插值

下面只修改 cn.ts 文件

2.1、 命名插值

定义插值 

const messages = {
  home: {
    title: `书城{a}{b}`,
  }
}

export default  messages

使用 

<template>
  <p>
    {{ $t("home.title",  {a:'123',b:'9999'}) }}
  </p>
</template>

效果 

2.2、列表插值

定义插值

const messages = {
  home: {
    title: `书城{0}{1}`,
    hint: '计算机科学和软件工程{0}',
    guessYouLike: '猜你喜欢'
  }
}
export default  messages

列表插值就定义从0开始的胡子语法数列,

注意:使用的时候数组的下标对应它的 {} 括号中的列表值

 使用

<template>
  <p>
    {{ $t("home.title",  ['一二','四五六']) }}
  </p>
  <p>
    {{ $t("home.hint",  ['123']) }}
  </p>
</template>

 效果

2.3、文字插值

文字插值主要是对于消息格式语法中的特殊字符很有用,

例如: {  }   @  $  |  

这些都是不能直接在消息中使用。

 定义格式:{' X '}  在括号中使用引号

const messages = {
  home: {
    title: `书城{'{'}这是一个书城{'}'}`,
  }
}
export default  messages

 如果你是这样直接使用     title: `书城{这是一个书城}` , 它会报错

翻译:消息编译错误:占位符“”中的标记无效这是一个书城'

 

3、messages

3.1、Linked messages(关联信息)

作用:把不同的值放到一起

 格式:@:key

//定义 ,这不是cn.ts文件的只是修改下,把代码减少
export default {
  book:'流浪地球',
  author:'刘慈欣',
  cover: "@:book - @:author",
}

//使用
<template>
  <p>
    {{ $t("cover",  ) }}
  </p>
</template>

3.2、Built-in Modifiers(内置修改器)

格式:@.modifier:key

upper:链接消息中的所有字符都大写
lower:将链接消息中的所有字符小写
capitalize:将链接消息中的第一个字符大写

export default {
  homeAddress: 'Home address',
  upper: '@.upper:homeAddress'
}

<template>
  <p>{{ $t('homeAddress') }}</p>
  <p>{{ $t('upper') }}</p>
</template>

 

3.3、自定义修饰符

const i18n:any =createI18n( {
  locale: 'cn', // 默认cn翻译
  messages,
  // 在' modifiers '选项设置自定义修饰符
  modifiers: {
    //别问为什么是any,问就是不知道怎么解决
    snakeCase: (str:any) => str.split(' ').join('_')
  }

})

使用也和3.2的一样

export default {
  homeAddress: 'Home address',
  upper: '@.snakeCase:homeAddress'
}

3.4、HTML messages(HTML信息)

在也可以使用html标签,然后使用v-html解析,不过v-html的要求要自己清楚

//定义
export default {
  cover:'hello <br> world'
}

//使用
<template>
  <p v-html="$t('cover')"></p>
</template>

4、Pluralization(多元化)

export default {
  car: 'car | cars',
  apple: 'no apples | one apple | {count} apples'
}

//使用------
<template>
  <p>{{ $t('car', 1) }}</p>
  <p>{{ $t('car', 2) }}</p>

  <p>{{ $t('apple', 0) }}</p>
  <p v-t="{ path: 'apple',args: 2 }"></p>
  <p>{{ t('apple', 1) }}</p>
  <p>{{ $t('apple', 10, { count: 10 }) }}</p>
   
    // plural:必传,9.2.2的预期不够好,不能绑定对象,只能绑定值
   <i18n-t keypath="message.plural" :plural="n">
    //要给传的复数,并且还要写值下来,就算是唯一一个值也要写,不然就是空
    <template #count> {{ n }} </template>
  </i18n-t>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const n= ref(4)

</script>

//结果------
<p>car</p>
<p>cars</p>

<p>no apples</p>
<p>2 les</p>
<p>one apple</p>
<p>10 les</p>
<p>4 les</p>

支持多元化的一些方法有:除了$tc上面都展示了

1、$tc   (只对 legacy 设置为true的生效,不介意使用 )

2、v-t   自定义指令(i18n自定义的,使用看1.2基本使用)

3、内置翻译组件(i18n-t) (目前不太推荐使用,比较麻烦)

4、使用解构 t  使用  i18n 

5、注入全局$t,

预定义的隐式参数

隐式参数是指(键值,隐式参数,{xxx:x})的第二个参数,第三个就是显示参数,

隐式参数可以指定第二个定义好的值,但它优先级没有第三个参数高,

举个例子:

//定义
export default {
  apple: 'no apples | one apple | {count} les | { count } apples '
}

//使用  
<template>
<p>{{ $t('apple', 0) }}</p>  //结果  no apples
<p>{{ $t('apple', 1) }}</p>  //结果  one apple
<p>{{ $t('apple', 2) }}</p>  //结果  2 les
<p>{{ $t('apple', 3) }}</p>  //结果  3 les
<p>{{ $t('apple', 4, { count: 10 }) }}</p>   //结果  4 les
</template>

最后一行没有得到我的预期的效果,估计是BUG,毕竟这个一直在变还没真的稳定下来

我的预期是 10 apples ,但我也不知道会向什么方向发展

多个复数定义,要自定义不然只显示第一个复数

自定义具体看:vue-i18n官网

中文网(不是官网,版本是8.*的,有一定的参考性):Vue I18n v8.x 使用手册

Logo

前往低代码交流专区

更多推荐