vue 国际化
时间: 2023-06-29 09:09:43 浏览: 52
Vue的国际化可以通过vue-i18n库来实现。下面是一个简单的示例:
1. 安装vue-i18n库
```javascript
npm install vue-i18n --save
```
2. 创建语言包
在项目中创建一个lang文件夹,并在该文件夹下创建多个json文件,每个文件对应一种语言,例如:
en.json
```javascript
{
"hello": "Hello",
"world": "World"
}
```
zh.json
```javascript
{
"hello": "你好",
"world": "世界"
}
```
3. 初始化vue-i18n
在main.js中引入vue-i18n库并初始化:
```javascript
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './lang/en.json'
import zh from './lang/zh.json'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'en',
messages: {
en,
zh
}
})
new Vue({
i18n,
render: h => h(App)
}).$mount('#app')
```
其中,locale指定默认语言,messages指定语言包。
4. 在组件中使用
在组件中使用$this.$t(key)来获取对应key的字符串,例如:
```javascript
<template>
<div>{{ $t('hello') }} {{ $t('world') }}</div>
</template>
```
这样,在不同的语言环境下,会自动显示对应的字符串。