基于Vue、vue-i18n实现国际化（多语言）

smallStone 发布于2019-08-23 14:30 / 1360人阅读

摘要：在中引入调用第三方插件新建一个对象默认语言配置语言选项是一个配置语言包文件和语言选项的文件，文件内容大致如下语言包列表合并语言包是一个函数，判断当前设置的语言类型，如果没有设置语言，则根据判断是中文还是非中文，非中文则显示英语。

vue-i18n官网 https://kazupon.github.io/vue...

项目用vue-cli构建，用到vue全家桶及webpack、iview。

1、在main.js中引入vue-i18n.

import VueI18n from "vue-i18n"
vue调用第三方插件
Vue.use(VueI18n)

2、新建一个vue-i18n对象

const i18n = new VueI18n({
  // 默认语言
  locale: LangCongig.DEFAULT_LANG,
  messages: LangCongig.LOCALES
})

3、配置语言选项

LangCongig是一个配置语言包文件和语言选项的js文件，文件内容大致如下：
// LangCongig.js
import IviewLangs from "./iviewLangs"

// 语言包列表, 合并语言包
const locales = {
  "cn": Object.assign(require("../lang/cn"), IviewLangs.zh_CN),
  "en": Object.assign(require("../lang/en"), IviewLangs.en_US)
}
export default {
  DEFAULT_LANG: setup(),
  LOCALES: locales
}
setup是一个函数，判断当前设置的语言类型，如果没有设置语言，则根据navigator判断是中文还是非中文，非中文则显示英语。
IviewLangs是iview的语言包配置，即我们定义的语言与iview显示的要一致，比如时间选择器的显示。
// IviewLangs.js
import zhCN from "iview/dist/locale/zh-CN" // 简体中文
import enUS from "iview/dist/locale/en-US" // 英文

export default {
  zh_CN: zhCN,
  en_US: enUS
}
require("../lang/cn")这个是我们自定义的中文语言包，格式如下：
// cn.js
module.exports = {
  language: "语 言",
  chinese: "中文"
}
// en.js
module.exports = {
  language: "language",
  chinese: "Chinese"
}

4、添加到new Vue选项里

let vm = new Vue({
  el: "#app",
  i18n,
  render: h => h(App)
})

5、如何调用

在页面调用：{{$t("language")}}
在js中调用：this.$t("language")

6、切换语言

1）把语言保存起来，以便退出或刷新时加载后还是当前选择的语言，一般存在cookie里
2）this.$i18n.locale = "en" 重置语言类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100708.html

如何让一个vue项目支持多语言（vue-i18n）

摘要：引入是一个插件，主要作用就是让项目支持国际化多语言。所以新建一个文件夹，存放所有跟多语言相关的代码。目前包含三个文件。全局搜索发现一共有多个。这两天手头的一个任务是给一个五六年的老项目添加多语言。这个项目庞大且复杂，早期是用jQuery实现的，两年前引入Vue并逐渐用组件替换了之前的Mustache风格模板。要添加多语言，不可避免存在很多文本替换的工作，这么庞杂的一个项目，怎么才能使...

wuyumin 2019-08-22 17:31 评论0 收藏0
vue 国际化i18n 多语言切换

摘要：如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。安装 npm install vue-i18n 新建一个文件夹 i18n ，内新建 en.js zh.js index.js 三个文件准备翻译信息 en.js export default { home: { helloworld: hello workd ！ } }; zh.js export d...

tuomao 2019-04-23 13:19 评论0 收藏0
vue-i18n和elementUI实现国际化

摘要：为了满足很多公司都已经向方向发展顾使用多语言的网站已经太普遍了所以是使用和实现国际化接下来我会尽量写的详细一点的内容个人觉得的应该写得清楚一些安装所需要用到的东西安装安装创建目录编写所需要用到的语言我只写了中文和英文欢迎来到我为了满足很多公司都已经向international方向发展,顾使用多语言的网站已经太普遍了, 所以是使用vue-i18n和elementUI实现国际化.接下来我...

_ang 2019-08-22 18:14 评论0 收藏0
vue-i18n结合Element-ui的配置

摘要：官网已经做了详细介绍，这里依葫芦画瓢跟着实现一下为了实现插件的多语言切换按照如上把国际化文件都整合到一起，避免中大段引入相关代码。使用方法：在配合 Element-UI 一起使用时，会有2个问题： ####（1）、页面刷新后，通过按钮切换的语言还原成了最初的语言，无法保存 ####（2）、框架内部自带的提示文字无法更改，比如像时间选择框内部中的提示文字关于第一个问题，可以在初始化...

孙淑建 2019-08-26 13:51 评论0 收藏0
记一次开源学习--D2Admin 人人企业版

摘要：前言上个月月底开源组开源了使用适配人人企业版专业版的前端工程具体详情见人人企业版适配发布。当然，也督促自己产出一篇相关的文章，来记录这次有趣的学习之旅。 Created by huqi at 2019-5-5 13:01:14 Updated by huqi at 2019-5-20 15:57:37 前言上个月月底@D2开源组开源了使用 D2Admin 适配人人企业版(专业版) 的...

notebin 2019-05-21 19:46 评论0 收藏0