专栏首页前端vueVue项目i18n国际化语言切换

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");
    }
}

效果预览 源码参考

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • json-server增删改查

    npm install json-server -g或cnpm install json-server -g

    RtyXmd
  • 3.使用sass、全局样式及进度条

    Sass 世界上最成熟、最稳定、最强大的专业级CSS扩展语言 NProgress 前端轻量级web进度条

    RtyXmd
  • Node中间件multer文件上传实践

    单文件上传,接收一个以fieldname命名的文件,文件信息保存在req.file

    RtyXmd
  • 算法可视化:把难懂的代码画进梵高的星空

    大数据文摘
  • 放弃fastjson,拥抱Jackson

    最近由于阿里的fastjson频繁爆出安全漏洞,为了避免后续升级上线的烦恼,决定弃用fastjson,使用Jackson,把现有项目中的fastjson都换成了...

    大数据技术与应用实战
  • 基于HT for Web矢量实现2D叶轮旋转

    之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元——叶轮旋转。 我们先来看下这个叶轮模型长什么样 ? 从模型上看,这个叶轮模型有三个叶片...

    HT for Web
  • Unity高级开发(二)-编辑器模式下的序列化对象类与序列化属性类

    雷潮
  • DotNet软件开发框架

    这是我4月份发在donews博客上的文章,现在都转到博客园来,风满袖希望进一步阐述你的架构,我就将这篇文章转移到博客园。原文:http://blog.donew...

    张善友
  • 基于HTML5 Canvas 实现矢量工控风机叶轮旋转

    HT_hightopo
  • 基于HT for Web矢量实现2D叶轮旋转

    HT_hightopo

扫码关注云+社区

领取腾讯云代金券