vue-i18n vue2如何使用
时间: 2023-11-26 15:43:37 浏览: 46
Vue-i18n 是一个国际化插件,可以方便地实现多语言切换。使用步骤如下:
1. 安装:`npm install vue-i18n --save`
2. 在 main.js 中引入并配置:
```
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zh', // 设置默认语言
messages: {
'zh': require('./assets/lang/zh.json'), // 引入中文语言包
'en': require('./assets/lang/en.json') // 引入英文语言包
}
})
new Vue({
el: '#app',
i18n,
components: { App },
template: '<App/>'
})
```
3. 在组件中使用 `$t` 方法来访问语言包中的文本:
```
<template>
<div>
<p>{{ $t('welcome') }}</p>
<p>{{ $t('hello', {name: 'Vue'}) }}</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
```
4. 在 `assets/lang` 目录下创建语言包文件,例如 `zh.json` 和 `en.json`,文件内容格式如下:
```
// zh.json
{
"welcome": "欢迎使用Vue",
"hello": "你好, {name}!"
}
// en.json
{
"welcome": "Welcome to Vue",
"hello": "Hello, {name}!"
}
```