vite+vue3+ts使用i18n
vite+vue3+ts使用i18n
vue3使用i18n必须使用9.*版本
"vue-i18n": "^9.2.2"
目录
1、下载使用
npm
npm install vue-i18n@9yarn
yarn add vue-i18n@9lang
1.1、创建配置
创建 lang 文件夹，然后再里面创建 cn.ts ，en.ts 和最重要的 index.ts
cn.ts
const messages = {
home: {
title: '书城',
hint: '计算机科学和软件工程',
guessYouLike: '猜你喜欢'
}
}
export default messagesen.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-i18nvite.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 使用手册
前往低代码交流专区
更多推荐
6
0- 0
已为社区贡献7条内容
所有评论(0)