vue3+antd 实现国际化 切换中英文

本文介绍了如何在Vue项目中通过vue-i18n插件配置中英文语言包,并实现语言的动态切换,包括设置i18n配置、语言包拆分、main.js中的使用以及在Ant Design Vue中的国际化应用。

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

首先新建结构文件夹

1.下载i18n插件

 npm install vue-i18n --save 

2.配置i18n.js文件

import { createI18n} from 'vue-i18n'
import message from './langs'
const localeData = {
    legacy: true, // composition API
    locale: 'cn',
    messages: message,
}
const i18n = createI18n(localeData);

export default i18n;

3.langs的index.js

import en from './us-en.js' //导入英文语言包
import cn from './zh-cn.js' //导入英文语言包
export default {
    en: en,
    cn: cn
}

4.中英文的语言包

         zh-cn.js 中文语言包

import goods from './cn/goods.js' 
var localeValues = {
    menu: {
        goods
    }
};

export default localeValues;

因为整个项目的语言包会很庞大,为了后期的维护,我将每个模块都分了出去

langs/cn/goods.js

export default {
    list:'产品列表'
}

        us-en.js 英文语言包

var localeValues = {
    menu: {
        goods: {
            list: 'goods list'
        }
    }
};

export default localeValues;

5.语言包准备好了之后,需要去main.js使用

6.到这语言包就导入完成了,并且可以实现翻译了,但是翻译的语言是固定的,不会动态切换

7.做一个切换按钮,在切换事件中 改变语言包

 这是切换的按钮 @change是切换的事件

            <a-radio-group v-model:value="locale" style="margin-left: 16px" @change="changeLanguage">
              <a-radio-button key="en"  value="en">English</a-radio-button>
              <a-radio-button key="cn" value="cn">中文</a-radio-button>
            </a-radio-group>

效果图:

 切换事件调用的方法:

    //切换语言
    changeLanguage(){
      this.$root.$i18n.locale = this.locale
      this.$store.commit('setLanguage',this.locale)
    },

核心:this.$root.$i18n.locale = this.locale 可以切换语言  this.locale是语言的标识(cn’,英文:‘en’)

8.需要在vuex里加上一个变量,用来标识现在是什么语言

切换方法

9.现在就实现了我们自定义的文字切换中英文,但是我们用的组件没有办法切换。我用的是antd,如果用的其他组件库可以去看看文档。

 导入antd的国际化语言包

import zhCN from 'ant-design-vue/es/locale/zh_CN';
import enGB from 'ant-design-vue/es/locale/en_GB';

在App.vue的最外层包裹上a-config-provider标签,并且加上:locale的属性

 在data里声明变量

locale获取当前的语言是中文还是英文,之后要用来判断

在App.vue里写一个监听,监听vuex里的language,变了说明切换语言了,在监听里获取language来判断是中文还是英文。enGB和zhCN是我们导入的antd的包

  watch: {
      '$store.state.language'(newval, oldval) {
        this.locale = this.$store.state.language
        if (this.locale === 'en') {
          this.language = enGB
        } else {
          this.language = zhCN
        }
        // console.log('===============================');
        // console.log(this.language.Menu.Goods.goods_list);
      }
  },

 在mounted里需要在获取一次进行判断,不然刷新页面就会变成默认的

这样就可以实现切换中英文啦!!!

10.在页面上使用翻译

以上内容是对翻译的配置,接下来如何在页面上使用呢?分别在vue2 vue3的写法使用

vue2:

因为我们在main.js已经配置了,页面上直接使用this.$t()就可以用了

在html部分 

js部分:

vue3写法:

   1.需要导入

import { useI18n } from 'vue-i18n'
const { t } = useI18n()

2.在页面使用

js部分

 

html部分:

 

搞定!!!!!

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值