vue2.7如何使用vue-i18n_vue2.7 vue-i18n

版本：
vue：2.7.0
vue-i18n：8.28.2

一、下载

npm i vue-i18n@8.28.2
1

二、新建

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

index.js：

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

zh.js:

export default {
    setting: {
        setting: '设置',
        ...
    }
}
1
2
3
4
5
6

en.js:

export default {
    setting: {
        setting: 'setting',
        ...
    }
}
1
2
3
4
5
6

…

三、在main.js引入

import i18n from '@/lang'

new Vue({
  router,
  pinia,
  i18n,
  render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8

四、在html中使用

在html标签中使用

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

在html文本中使用

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

五、在js中使用

this.$t('setting.setting')
1

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

5.1 新建一个vueApi.js

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
}
1
2
3
4
5
6
7
8

5.2 使用

可以愉快的使用composition api 啦

引入：

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

const i18n = useI18n()
1
2
3

六、切换语言

<button @click="changeLanguage('zh')">中文</button>
<button @click="changeLanguage('en')">英文</button>
...
1
2
3

const changeLanguage = (e) => {
  i18n.locale = e
}
1
2
3