Vue2 如何使用i18n（看完必会）

我穿棉裤了

已于 2024-03-02 14:30:25 修改

阅读量6.9k

点赞数 22

文章标签： javascript vue.js ecmascript

于 2024-03-02 14:13:33 首次发布

本文链接：https://blog.csdn.net/qq_69012364/article/details/136414538

版权

1.需求分析

项目中需要使用到中英切换、两种或者多种语言切换时。就需要用到 i18n 这个库。
i18n 不仅可以让我们的项目实现语言切换、更可以使我们的项目走向国际化!!!

2.安装

npm install vue-i18n@8.2.1 --save

这里有个疑问，为什么要安装8版本的vue-i18n呢。

原因在于：因为我们的是vue2 的项目。如果我们直接使用 npm install vue-i18n 大抵是会报错的。

**peer vue@“^3.0.0” from vue-i18n@9.1.9 ** 这段意思是版本不匹配

所以我们需要给vue-i18n 降级

我们可以使用下面命令查看 vue-i18n 所有版本：

npm view vue-i18n versions --json

这里我选择的是8.2.1版本。执行命令就不会报错了

3.使用

en.js

/**
 * Blogs 小猪宰汁 
 * Date: 2023/3/2
 * filename：en.js
 */
export const h = {
  system: "Background management system",
  full: "full-screen display",
  account: "myAccount",
  invoice: "invoice",
  reconciliation: "Statement",
  record: "recording",
  report: "report",
  setting: "Settings",
  login: "login",
  tips: "Username and password are filled in casually",
  administrator: "administrator",
  placeUser: "please enter user name",
  palcePass: "Please enter your password",
  palceCode: "please enter verification code",
  accounts: "accounts",
  password: "password",
  code: "Verification code"
}

zh.js

/**
 * Blogs 小猪宰汁 
 * Date: 2023/3/2
 * filename：zh.js
 */
export const h = {
  system: "Vue后台管理系统",
  full: "全屏显示",
  account: "我的账户",
  invoice: "原始单据",
  reconciliation: "财务对账",
  record: "对账记录",
  report: "月结报表",
  setting: "系统设置",
  login: "登录",
  tips: "用户名和密码随便填",
  administrator: "管理员",
  placeUser: "请输入用户名",
  palcePass: "请输入密码",
  palceCode: "请输入验证码",
  accounts: "账号",
  password: "密码",
  code: "验证码"
}

index.js

import Vue from "vue";
import VueI18n from "vue-i18n";

Vue.use(VueI18n); // 全局挂载

export const i18n = new VueI18n({
  locale: localStorage.getItem("locale") || "en", // 从localStorage中获取 默认英文
  messages: {
    zh: require("./lan/zh"), // 中文语言包
    en: require("./lan/en") // 英文语言包
  }
});

export default i18n;

2.随后我们在我们的入口文件main.js里

import { i18n } from './i18n/index' //国际化
new Vue({
  el: '#app',
  router,
  store,//使用store
  i18n, //使用国际化
  components: { App },
  template: '<App/>'
})

4.用法实例

   <!-- 这个按钮方便我们用来切换语言 -->
      <template>   
        <div class="full" @click="changeLangEvent()">
          <span class="lan">{{language}}</span>
        </div>
      </template>

<script>
  export default {
data (){
     return {
         language: localStorage.getItem("lang") ||"EN"
        }
    },
 methods:{
       changeLangEvent(){
             console.log(this.$i18n);
              if (this.language == "EN"){
                localStorage.setItem("locale", "zh");
                this.$i18n.locale = localStorage.getItem("locale");
                this.$message({
                  message:"切换为中文！",
                  type:"success"
                });
                localStorage.setItem("lang", "ZH");
                this.language = "ZH";
                location.reload(); //重新加载
              } else if (this.language == "ZH"){
                localStorage.setItem("locale", "en");
                this.$i18n.locale = localStorage.getItem("locale");
                this.$message({
                  message:"Switch to English!",
                  type:"success"
                });
                localStorage.setItem("lang", "EN");
                this.language = "EN";
                location.reload();
              }
          }
    }
</script>

我们在需要切换语言的文字中

<div class="system">{{$t('h.system')}}</div>

以上就是关于vue2如何使用i18n的介绍与步骤简单的一些整理哪里有不对的或者有写错的就在下面留言我们共同进步 ~~~~