中英文切换，vue项目国际化使用教程（国际化使用详细，i18n国际化）

落日映苍穹つ 2023-10-09 20:02 117阅读 0赞

#### **简述：在工作中，我们难免会遇到把文字切换成外语的需求，这里来记**录下如何在项目中点击切换成英语，这里会用到i18n，它是一个支持国际化功能的插件，这里来分享下它的使用过程。 ####

**1、首先，我们需要在项目中执行此命令，下载安装相关依赖。**

npm install vue-i18n

**2、创建语言包文件，langue 文件夹，在该文件夹下再分别创建与默认语言与翻译语言的文件，例如zh.js和en.js，在文件中写入你需要展示和翻译的文本，然后导出，最后在新建一个i18n.js文件引入zh.js和en.js文件，这样的话总体结构比较清晰明了，像下面这样 。**

![978d3c9e76dc4f4ab6625be660544c78.png][]

**zh.js：**

export default {
      demo1: {
        welcome: "你好，世界",
      },
      demo2: {
        name1: "托尼",
        name2: "杰克",
      },
    }

**en.js：**

export default {
      demo1: {
        welcome: "Hello,world!"
      },
      demo2: {
        name1: "toni",
        name2: "jack",
      },
    }

**在i18n.js文件中引入需要用到的文件，并处理数据后导出；**

import Vue from "vue";
    import VueI18n from "vue-i18n";
    Vue.use(VueI18n);
    
    import zhLocale from "./zh";
    import enLocale from "./en";
    
    
    const messages = {
      zh: {
        ...zhLocale,
      },
      en: {
        ...enLocale
      }
    }
    
    const i18n = new VueI18n({
      locale: "zh",
      messages
    })
    
    export default i18n;

**3、在main.js中引入，挂载使用；**

import i18n from "../src/langue/i18n.js"
    console.log(i18n);
    
    new Vue({
      router,
      store,
      i18n,
      render: (h) => h(App),
    }).$mount("#app");

**控制台输出i18n，VueI18n打印成功：**

![9d437d2247ff49adb906f6ed4686e00e.png][]

**4、具体使用**

**通过 \{ \{$t('')\}\} 和 v-text="$t('')"  展示文本：**

<div>{
       {$t('demo1.welcome')}}</div>
    
    <div v-text="$t('demo1.welcome')"></div>

**通过 this.$i18n.locale 来修改语言显示状态，当你赋值为‘zh’时，就变成中文，**

**当赋值为 ‘en’时，就变成英文：**

// 点击事件
    choseLanguage() {
          
          const res = this.$i18n.locale;
          this.$i18n.locale = res == 'zh' ? res = 'en' : res = 'zh';
    
    }

**`this.$i18n.locale`用于获取当前语言环境的值，也可以被用于动态地改变语言环境。你可以将它的值更改为另一个支持的语言代码，从而切换到该语言环境。例如：`this.$i18n.locale = 'fr'`将把应用程序的语言环境更改为法语。**

**5、****最终效果**

![f1e17491cc1d4016828e3a09e38ecb2c.gif][]

**tips: 当然，如果数据两较少的话，可以直接在main.js中引入后，配置使用，使用方式同样：**

import VueI18n from 'vue-i18n'
    Vue.use(VueI18n)
    const i18n = new VueI18n({
      locale: 'zh',
      messages: {
        en: {
          loginTxt: "login",
          change: 'change'
        },
        zh: {
          loginTxt: '登录',
          change: '切换'
        }
      }
    })
    
    new Vue({
      router,
      store,
      i18n,
      render: (h) => h(App),
    }).$mount("#app");

更多，详见>>

[Vue I18n官方网站![icon-default.png_t_N3I4][]https://kazupon.github.io/vue-i18n/zh/installation.html\#%E5%85%BC%E5%AE%B9%E6%80%A7%E8%AF%B4%E6%98%8E][Vue I18n_icon-default.png_t_N3I4_https_kazupon.github.io_vue-i18n_zh_installation.html_E5_85_BC_E5_AE_B9_E6_80_A7_E8_AF_B4_E6_98_8E]

**感觉有用，就一键三连，感谢(●'◡'●)**

[978d3c9e76dc4f4ab6625be660544c78.png]: https://img-blog.csdnimg.cn/978d3c9e76dc4f4ab6625be660544c78.png
[9d437d2247ff49adb906f6ed4686e00e.png]: https://img-blog.csdnimg.cn/9d437d2247ff49adb906f6ed4686e00e.png
[f1e17491cc1d4016828e3a09e38ecb2c.gif]: https://img-blog.csdnimg.cn/f1e17491cc1d4016828e3a09e38ecb2c.gif
[icon-default.png_t_N3I4]: https://csdnimg.cn/release/blog_editor_html/release2.2.5/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N3I4
[Vue I18n_icon-default.png_t_N3I4_https_kazupon.github.io_vue-i18n_zh_installation.html_E5_85_BC_E5_AE_B9_E6_80_A7_E8_AF_B4_E6_98_8E]: https://kazupon.github.io/vue-i18n/zh/installation.html#%E5%85%BC%E5%AE%B9%E6%80%A7%E8%AF%B4%E6%98%8E