vue实现语言转换

最新推荐文章于 2025-06-10 16:16:11 发布

原创最新推荐文章于 2025-06-10 16:16:11 发布 · 891 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何利用vue-i18n在Vue项目中实现语言转换。首先安装vue-i18n，然后在main.js配置，创建语言包如zhCN.js。在模板中使用{{ $t('message.home') }}显示对应语言文字。对于属性内的文字，可借助v-bind。在JavaScript中，通常直接引用，但在Ajax中需注意this指向问题，需额外定义变量保存vue实例。

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

通过vue-i18n实现的语言的转换

首先自然要先安装vue-i18n

npm install vue-i18n

安装完成后再main.js中使用vue-i18n

import VueI18n from 'vue-i18n'
import en from '../static/lang/en'
import zhCHS from '../static/lang/zhCN'
import zhCHT from '../static/lang/zhTW'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zhCN'
  messages:{
    'en': en,
    'zhCN': zhCN,
    'zhTW': zhTW,
  }
})


new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

其中en,zhCN等是我们自己使用的语言包，结构如下：

zhCN.js

module.exports={
  Message:{
    home:'首页',
    news:'动态'
  }
}

在template标签中使用

{{$t("Message.home")}}

这会从当前的语言包中渲染出相应的文字，如默认的语言包是zhCN,则这段代码会显示为首页

如果文字是在标签的属性内，我们可以用v-bind替换其中的文字

:value="$t('Message.home')"

在js部分使用

一般情况下，引用方法如下：

this.$t('Message.home')

但是在Ajax中这样使用就会出问题，在网上找了一些资料，似乎Ajax中的this都会指向Ajax本身，所以我们要另外定义一个变量指向vue，只需在Ajax前定义

var that = this

之后再Ajax中用that替换

that.$t('Message.home')