2023-08-16

工作日记：vue2.7如何使用vue-i18n

> 版本：

> vue：2.7.0

> vue-i18n：8.28.2

## 一、下载

```javascript

npm i vue-i18n@8.28.2

```

## 二、新建

新建一个文件，例如：lang，项目结构如下：


index.js：

```javascript

import Vue from 'vue'

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

import zh from './zh'

import tw from './tw'

import en from './en'

import vn from './vn'

import ru from './ru'

const messages = {

    'zh': zh,

    'tw': tw,

    'en': en,

    'vn': vn,

    'ru': ru

}

const i18n = new VueI18n({

    locale: 'zh',

    fallbackLocale: 'zh-CN',

    messages,

})

export default i18n

```

设置语言内容，例如：zh.js / en.js

zh.js:

```javascript

export default {

    setting: {

        setting: '设置',

        ...

    }

}

```

en.js:

```javascript

export default {

    setting: {

        setting: 'setting',

        ...

    }

}

```

....

## 三、在main.js引入

```javascript

import i18n from '@/lang'

new Vue({

  router,

  pinia,

  i18n,

  render: h => h(App)

}).$mount('#app')

```

## 四、在html中使用

在html标签中使用

```html

<NavBar :title="$t('setting.setting')"  bg-color="#FDDEF3"/>

```

在html文本中使用

```html

<p>{{$t('setting.setting')}}</p>

```

## 五、在js中使用

```javascript

this.$t('setting.setting')

```

但是因为vue.2.7，setup中不可以直接使用this的，所以需要自行封装一个useI18n

### 5.1 新建一个vueApi.js

```javascript

import { getCurrentInstance } from 'vue'

// 访问i18n

export const useI18n = () => {

    const vm = getCurrentInstance()

    if (!vm) throw new Error('must be called in setup')

    return vm.proxy.$i18n

}

```

### 5.2 使用

可以愉快的使用composition api 啦

引入：

```javascript

import { useI18n } from '@/utils/vueApi'

const i18n = useI18n()

```

## 六、切换语言

```html

<button @click="changeLanguage('zh')">中文</button>

<button @click="changeLanguage('en')">英文</button>

...

```

```javascript

const changeLanguage = (e) => {

  i18n.locale = e

}

```