后台管理系统vue-i18n中英文切换功能

一.vue-i18n是什么？

一款针对Vue.js 的国际化插件。把网站的所有需要中英转换的数据配置成中英文json文件，需要编写大量中英文对照表，适合于少量的固定翻译。

二.使用步骤

1.安装vue-i18n

npm install vue-i18n

2.添加本地翻译信息

本地翻译信息有两个，zh.js中文和en.js英文，这两个js的内容是一一对照的。

在src文件夹下创建lang文件夹，并添加两个zh.js和en.js文件。

en.js—英文
zh.js—中文
index.js----处理默认语言与导出i18n对象，方便在main.js中use

en.js代码如下（示例）：

import enLocale from 'element-ui/lib/locale/lang/en'const en = {//全局配置add : 'add',welcome : 'welcome',//局部status : {disabled : 'disabled',  //不可用abled : 'abled'         //可用},//elementUI...enLocale
}
export default en;

zh.js代码如下（示例）：

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'const zh = {//全局配置add : '添加',welcome : '欢迎您',//局部status : {disabled : '不可用',  //不可用abled : '可用'         //可用},//elementUI...zhLocale
}
export default zh;

注意：

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import enLocale from 'element-ui/lib/locale/lang/en'

这是elementUI组件国际化。elementUI组件如何使用国际化中英文切换？

index.js代码如下（示例）：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './en.js'
import zh from './zh.js'
Vue.use(VueI18n)
const messages = {en:en,zh:zh
}export function getLanguage(){const chooseLanguage = window.localStorage.getItem("language");if(chooseLanguage)return chooseLanguage//如果没有选择语言，默认为zhconst language = (navigator.language || navigator.browserLanguage).toLowerCase();const locales = Object.keys(messages);for(const locale of locales){if(language.indexOf(locale) > -1){console.log("locale===",locale)return locale;}}return 'zh'
}
const i18n = new VueI18n({locale: getLanguage(),messages
})export default i18n

4.将i18n对象挂载到Vue实例

main.js代码如下（示例）：

import Vue from "vue";
import i18n from './lang/index'  //lang/index.js暴露了i18n对象，所以这里引用Vue.use(ElementUI);
new Vue({router,i18n,render: h => h(App)
}).$mount("#app");

5.在html模板中使用

在你需要使用中英文切换的地方，语法格式{{$t(“XX”)}}

<div>{{$t("welcome")}}</div>

后台管理系统vue-i18n中英文切换功能相关推荐

vue实现中英文切换功能
1.首先在百度翻译的开放平台中,获取属于自己的APPid,没有注册先注册 2.得到了这些基本信息后,需引入md5插件npm install --save js-md5 3.请求接口及对应参数通用翻译 ...
视频教程-vuecli实战商城后台管理系统-Vue
vuecli实战商城后台管理系统帝莎学院创始人&CEO,目前主要从事全栈开发.Python.PHP.小程序.App.Web等技术的研究和开发.专注于实战类教程,授课风趣幽默,讲解条理清晰.通 ...
thinkphp后台管理系统+vue前端H5 app
thinkphp后台管理系统+vue前端H5 app 众包接单型App 全部源码已发布,欢迎star, 移步码云前言 1.帮朋友做的一个接单类型的后台管理系统(朋友的需求是淘宝好评刷管理) 2.目前 ...
Vue + ElementUI 后台管理系统实现主题风格切换
一.目的此次写作内容是在我之前发布一篇文章的基础上进行新增的. 上一篇文章:Vue + ElementUI 后台管理系统实现顶部一级菜单栏,左侧二级菜单栏_无解的菜鸟晖的博客-CSDN博客这次要实 ...
vue项目中英文切换（多语言国际化）-- i18n插件的用法
1.安装 npm install vue-i18n --save 2.在main.js文件中: import i18n from './i18n/i18n'//我是把i18n单独放一个文件夹,这里是引 ...
【vue】中英文切换（多语言国际化）
一.安装i18n插件 npm install vue-il8n@8.23.0 --save 二.创建语言包文件夹与配置 (1)index.js中 import Vue from 'vue' // 引入 ...
后台管理系统之图片上传功能
此案例是基于nodejs开发的一个操作banner图后台管理系统具体功能详解如下 1.文件上传功能 1-1.前端操作首先文件上传我们利用了input框的h5特性 file //此时需要注意的地方是 ...
android中英文切换功能,Android APP 中英文切换
实习期间,师父要求做app的中英文切换,就顺便记录了下. 一.AndroidManifest.xml文件(清单文件) 在每个要切换语言的Activity下面添加: android:configChan ...
vue实现Tab切换功能
在项目开发中,我们经常会碰到Tab切换的功能,而在Vue中想实现这样的功能也应该有很多种,常用的三种应该是 Tab路由切换.Tab动态组件切换.通过v-show设置Tab显示隐藏.每种方法实现起来其实 ...