vue2项目使用vue-i18n

最新推荐文章于 2024-09-17 14:59:39 发布

今天吃了嘛o

最新推荐文章于 2024-09-17 14:59:39 发布

阅读量538

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45535843/article/details/141563114

版权

1、安装插件。

npm install --save vue-i18n@8.0.0

2、scr目录下新建i18n文件夹，下边创建三个文件，分别是入口文件以及你所需的语言文件。
3、项目中引用。

import VueI18n from "vue-i18n";
Vue.use(VueI18n);
import i18n from "./i18n/index"; //文件中新建的i18n文件
new Vue({
  i18n, //使用国际化
  render: (h) => h(App),
}).$mount("#app");

4、i18n文件下的入口文件内容。

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

// 引入各个语言配置文件
import zh from "./zh.js";
import en from "./en.js";

Vue.use(VueI18n);
// 获取当前域名
let currentLanguage = localStorage.getItem("accept_language");

if (!currentLanguage) {
  if (!isShowEn) {
    localStorage.setItem("accept_language", "th");
  } else {
    localStorage.setItem("accept_language", "en");
  }
}

// 创建vue-i18n实例i18n
const i18n = new VueI18n({
  // 设置默认语言
  locale: localStorage.getItem("accept_language") || "zh", // 语言标识
  // 添加多语言（每一个语言标示对应一个语言文件）
  messages: {
    en,
    zh,
  },
});
// 暴露i18n
export default i18n;

5、页面头部可以使用下拉选切换语言。

    <!-- <div>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link" style="color: #fff">
            {{ currentLan }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(lang, index) in langs"
              :key="index"
              :command="lang"
              >{{ lang.text }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div> -->
  data() {
    return {
      curLanguage: localStorage.getItem("accept_language"),
      currentLan: "",
      langs: [
        { text: "English", value: "en" },
        { text: "中文", value: "zh" },
      ],
    };
  },
  methods: {
    handleCommand(command) {
      localStorage.setItem("accept_language", command.value);
      this.$i18n.locale = command.value;
      console.log(command.value, "command.value");
      this.currentLan = this.langs.find(
        (item) => item.value === command.value
      )?.text;
      window.location.reload();
    },
  },
  created() {
    this.currentLan = this.langs.find(
      (item) => item.value === this.curLanguage
    )?.text;
  },