Vue项目i18n国际化语言切换

本篇分两部分，第一部分为vue+i18n国际化，第二部分是怎样适配element的国际化，第三部分为使用方法
效果预览 源码参考

第一部分：Vue+i18n

1.安装依赖

npm install vue-i18n

2.创建语言目录及文件

在src目录下创建所需文件

目录结构

3.编辑中英文语言

中文：src/i18n/langs/cn.js

const cn = {
  header: {
    logo: "标志",
    router: {
      index: "首页",
      about: "关于"
    }
  },
  user: {
    login: "登录",
    register: "注册",
    hasCount: "已有账号?",
    noCount: "没有账号?",
    logOut: "退出登录",
    logSucc: "登录成功",
    place: {
      userName: "请输入用户名",
      passWord: "请输入密码",
      passWordAgain: "请再次输入密码",
      passNotMatch: "两次输入密码不一致"
    }
  },
  code: {
    error: "错误"
  }
};
export default cn;

英文：src/i18n/langs/cn.js

const en = {
  header: {
    logo: "Logo",
    router: {
      index: "Index",
      about: "About"
    }
  },
  user: {
    login: "Sign in",
    register: "Sign up",
    hasCount: "Already have an account?",
    noCount: "New user?",
    logOut: "Sign out",
    logSucc: "Sign in Success",
    place: {
      userName: "Please enter a user name",
      passWord: "Please enter your password",
      passWordAgain: "Please enter your password again",
      passNotMatch: "The two passwords do not match"
    }
  },
  code: {
    error: "error"
  }
};
export default en;

4.引入对应语言包

// i18n/langs/index.js
import en from "./en";
import cn from "./cn";
export default {
  en: en,
  cn: cn
};

5.编辑i18n.js文件

//引入vue
import Vue from "vue";
//引入i18n语言包
import VueI18n from "vue-i18n";
//引入定义好的中英文语言
import messages from "./langs";
//在vue中使用i18n
Vue.use(VueI18n);

//初始化设置默认语言
const i18n = new VueI18n({
  locale: "en",
  messages
});

export default i18n;

6.main.js中引入i18n

//main.js
import i18n from "./i18n/i18n";

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

第二部分：Vue+element+i18n

这里主要是为了在切换语言的时候让element自身也能同时切换

1.在语言文件中引入element默认语言

中文：src/i18n/langs/cn.js

import cnLocale from "element-ui/lib/locale/lang/zh-CN";
const cn = {
  //其他语言参数
  ...cnLocale
};

英文：src/i18n/langs/en.js

import enLocale from "element-ui/lib/locale/lang/en";
const en = {
  //其他语言参数
  ...enLocale
};

2.引入element语言切换

// src/i18n/i18n.js
import locale from "element-ui/lib/locale";

locale.i18n((key, value) => i18n.t(key, value));

第三部分：如何使用

1.插值使用

插值使用

2.属性绑定

属性绑定

3.变量使用

变量使用

4.实现切换

//切换语言
methods: {
    switchLang() {
      this.$i18n.locale == "cn"
        ? (this.$i18n.locale = "en")
        : (this.$i18n.locale = "cn");
    }
}

效果预览 源码参考