示例代码
https://github.com/ityuanfeng/i18n-demo
install
1
2
3
4
5
6
7
8
9
10
11
12
13
| import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
const i18n = createI18n({
// something vue-i18n options here ...
})
const app = createApp({
// something vue options here ...
})
app.use(i18n)
app.mount('#app')
|
Start
方式一
列表的形式，{0},{1}，以下标作为占位符
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <script>
const i18n = createI18n({
locale: 'ja',
fallbackLocale: 'en',
messages: {
en: {
message: {
hello: 'hello world {0}'
}
},
ja: {
message: {
hello: 'こんにちは、世界 {0}'
}
}
}
})
</script>
<template>
<h1>{{ $t('message.hello',['name']) }}</h1>
</template>
|
方式二
以键值对的形式，key为占位符
1
2
3
4
5
6
7
8
9
10
11
12
| <script>
const messages = {
en: {
message: {
hello: '{msg} world'
}
}
}
</script>
<template>
<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>
</template>
|
方式三
Link,引入其他的对象。
1
2
3
4
5
6
7
8
9
| const messages = {
en: {
message: {
the_world: 'the world',
dio: 'DIO:',
linked: '@:message.dio @:message.the_world !!!!'
}
}
}
|
- @:message.dio = DIO:
- @:message.the_world = the world
1
2
| <p>{{ $t('message.linked') }}</p>
<p>DIO: the world !!!!</p>
|