vue2.7如何使用vue-i18n

平井缘

已于 2023-08-10 15:12:31 修改

阅读量808

点赞数 1

文章标签： vue.js javascript 前端

于 2023-08-10 15:07:57 首次发布

本文链接：https://blog.csdn.net/weixin_45693257/article/details/132209912

版权

本文介绍了如何在Vue2.7.0项目中使用vue-i18n8.28.2实现国际化功能，包括下载、新建语言文件、在main.js引入、HTML和JS中的使用，以及在setup中封装useI18n以适应2.7版本。还涉及了如何切换语言。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

版本：
vue：2.7.0
vue-i18n：8.28.2

一、下载

npm i vue-i18n@8.28.2

二、新建

新建一个文件，例如：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

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

zh.js:

export default {
    setting: {
        setting: '设置',
        ...
    }
}

en.js:

export default {
    setting: {
        setting: 'setting',
        ...
    }
}

…

三、在main.js引入

import i18n from '@/lang'

new Vue({
  router,
  pinia,
  i18n,
  render: h => h(App)
}).$mount('#app')

四、在html中使用

在html标签中使用

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

在html文本中使用

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

五、在js中使用

this.$t('setting.setting')

但是因为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
}

5.2 使用

可以愉快的使用composition api 啦

引入：

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

const i18n = useI18n()

六、切换语言

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

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