vue中如何实现实现中英文切换_vue实现中英文切换-CSDN博客

本文链接：https://blog.csdn.net/WebDestiny/article/details/101293872

本文详细介绍了如何在Vue项目中实现国际化，包括安装vue-i18n插件，配置main.js文件，定义中英文语言包，通过点击事件切换语言，以及在模板中使用数据渲染语法。

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

一、安装 vue-i18n插件

npm i vue-i18n

二、main.js文件的配置

import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // 通过插件的形式挂载

const i18n = new VueI18n({
    locale: 'zh-CN',    // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
      'zh-CN': require('./common/lang/zh'),   // 中文语言包
      'en-US': require('./common/lang/en')    // 英文语言包
    }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,  // 不要忘记
  store,
  router,
  template: '<App/>',
  components: { App }
})

三、定义两套中英文的 js 文件，并通过 require 的形式引入到 main.js。

在 main.js 中的代码中，可以看到，当 locale 的值为‘zh-CN’时，版本为中文；当 locale 的值为‘en-US’,版本为英文。当然你也可以换成 zh 和 en，这个自定义就好，对应上就可以。

en.js 英文语言包：

export const m = { 
  girl: 'Girl',//女孩
}

zh.js中文语言包：

export const m = {
  girl: '女孩',
}

四、绑定点击事件，来修改 locale 的值去调用对应的语言包实现语种切换。

changeLangEvent() {
      if (this.lang === "zh-CN") {
        this.lang = "en-US";
        this.$i18n.locale = this.lang; //关键语句
      } else {
        this.lang = "zh-CN";
        this.$i18n.locale = this.lang; //关键语句
      }
    }

五、vue-i18n 数据渲染的模板语法

我们知道 vue 中对于文字数据的渲染，有以‘’{{}}‘’或者 v-text、v-html等的形式，同样的使用国际化后，依旧可以沿用，但需要一点修改。


v-text:

<span v-text="$t('m.music')"></span>

{{}}:

<span>{{$t('m.music')}}</span>