在
JavaScript 文件中
使用 i18n 的 `$t` 方法，通常需要确保
i18n 实例已经正确创建并挂载到
Vue 应用中。在非
Vue 组件的
JavaScript 文件中，可以通过导入
i18n 实例并调用其 `t` 方法来实现翻译功能。
### 在
JavaScript 文件中
使用 `$t` 方法的步骤：
1
. **创建
i18n 实例**
首先，在项目中创建一个
i18n 实例，通常
使用 `create
I18n` 方法从 `
vue-
i18n` 库中引入。该实例将包含语言环境、翻译内容等配置信息。
```
javascript
//
i18n.js
import { create
I18n } from '
vue-
i18n';
const messages = {
en: {
greeting: 'Hello, {name}!',
items: 'You have {count} item{plural}',
},
zh: {
greeting: '你好，{name}！',
items: '你有 {count} 个条目{plural}',
},
};
const
i18n = create
I18n({
legacy: false, //
使用 Composition API 模式
locale: 'en', // 设置默认语言
fallbackLocale: 'en',
messages, // 设置翻译内容
});
export default
i18n;
```
2
. **在
Vue 应用中挂载
i18n 实例**
在
Vue 应用的入口
文件中，将
i18n 实例挂载到
Vue 应用中，确保组件可以访问到 `$t` 方法。
```
javascript
// main
.js
import { createApp } from '
vue';
import
i18n from '
./
i18n';
import App from '
./App
.vue';
const app = createApp(App);
app
.use(
i18n);
app
.mount('#app');
```
3
. **在
JavaScript 文件中调用 `$t` 方法**
在非
Vue 组件的
JavaScript 文件中，可以通过导入
i18n 实例，并
使用其 `t` 方法来获取翻译内容。
```
javascript
// utils
.js
import
i18n from '
./
i18n';
function getTranslatedGreeting(name) {
return
i18n.global
.t('greeting', { name });
}
function getTranslatedItems(count) {
const plural = count !== 1 ? 's' : '';
return
i18n.global
.t('items', { count, plural });
}
export { getTranslatedGreeting, getTranslatedItems };
```
4
. **在
Vue 组件中
使用翻译内容**
在
Vue 组件中，可以直接通过 `$t` 方法访问翻译内容，或者调用上述
JavaScript 文件中定义的函数。
```
vue
<template>
<div>
<p>{{ greeting }}</p>
<p>{{ items }}</p>
</div>
</template>
<script>
import { ref, onMounted } from '
vue';
import { getTranslatedGreeting, getTranslatedItems } from '@/utils';
export default {
setup() {
const greeting = ref('');
const items = ref('');
onMounted(() => {
greeting
.value = getTranslatedGreeting('John');
items
.value = getTranslatedItems(2);
});
return { greeting, items };
},
};
</script>
```
### 注意事项
- **参数传递**
`$t` 方法支持通过对象或数组传递参数。推荐
使用命名参数（对象）以提高可读性和减少错误。例如，`$t('greeting', { name: 'John' })`。
- **复数处理**
如果需要处理复数场景，可以
使用 `$tc` 方法。例如，`$tc('items', count, { count, plural: count !== 1 ? 's' : '' })`。
- **类型声明**
如果在 TypeScript 项目中
使用 `$t` 方法，可能需要添加类型声明以避免类型报错。可以在 `shim-uni
.d
.ts`
文件中添加以下代码：
```typescript
declare module '
vue' {
interface ComponentCustomProperties {
$t: (message: string, values?: Record<string, any>) => string;
}
}
```
- **配置检查**
如果遇到参数未
生效的问题，请检查占位符格式是否与参数类型匹配，并确保 `
vue-
i18n` 的版本和配置正确。
###
扫一扫
2134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
