【vue 进阶指南一】多语言国际化（中英文切换）

vue + element-ui + vue-i18n 多语言国际化

1.element-ui 并不支持最新版的vue-i8n 插件，开发时注意i18n的版本，当然本示例成功解决版本不兼容的问题，详细说明请看element官方文档：http://element-cn.eleme.io/#/zh-CN/component/i18n

2.当前引入模式兼容了element-ui，如果未引入element-ui，请移步：https://segmentfault.com/a/1190000012779120#articleHeader1

教程开始

1.安装 vue-i18n 插件 (默认为最新版)

npm install vue-i18n

2.建立文件夹/文件

在main.js同级建i18n新文件夹，里面新建i18n.js、langs文件夹，langs文件夹下新建en.js、cn.js、index.js;

参照请移步：https://github.com/ahateam/aha-admin-template.git

3.各文件代码

//i18n.jsimport Vue from 'vue'
import locale from 'element-ui/lib/locale';
import VueI18n from 'vue-i18n'
import messages from './langs'
Vue.use(VueI18n)
//从localStorage中拿到用户的语言选择，如果没有，那默认中文。
const i18n = new VueI18n({locale: localStorage.lang || 'cn',messages,
})
locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换export default i18n

//cn.js
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const cn = {router:{'home' : '系统首页','document' : '文档中心','document1':'文档1','document2':'文档2','document3':'文档3','document4':'文档4','document5':'文档5','echarts' : '图表插件','table' : '表格插件','component' : '组件列表','component1' : '组件1','component2' : '组件2','component3' : '组件3','component4' : '组件4','component5' : '组件5','set':'系统设置','set1':'设置1','set2':'设置2','set3':'设置3','set4':'设置4','set5':'设置5','set6':'设置6','set7':'设置7',},...zhLocale
}export default cn;

//en.jsimport enLocale from 'element-ui/lib/locale/lang/en'
const en = {router:{'home' : 'Home','document' : 'Documente','document1':'Documente1','document2':'Documente2','document3':'Documente3','document4':'Documente4','document5':'Documente5','echarts' : 'Echarts','table' : 'Table','component' : 'Component','component1' : 'Component1','component2' : 'Component2','component3' : 'Component3','component4' : 'Component4','component5' : 'Component5','set':'Set Center','set1':'Set 1','set2':'Set 2','set3':'Set 3','set4':'Set 4','set5':'Set 5','set6':'Set 6','set7':'Set 7',},...enLocale
}export default en;

//index.js
import en from './en';
import cn from './cn';
export default {en: en,cn: cn
}

//main.js  中插入 import i18n from './i18n/i18n'   并在vue实例中挂载
//main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import Echarts from 'echarts'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'import i18n from './i18n/i18n'Vue.prototype.$echarts = Echarts
Vue.config.productionTip = falseVue.use(ElementUI)/* eslint-disable no-new */
new Vue({el: '#app',router,i18n,components: { App },template: '<App/>'
})

4.使用示例

//在一个组件中 通过{{$t('router.document')}}  引用<template><div><p>{{$t('router.document')}}</p></div>
</template><script>export default {name: "Lang",}
</script><style scoped></style>

更改中英文显示方式

//在任意组件中加入按钮  改变 this.$i18n.locale 对应的值就行 'en'表示英文，'cn'表示中文<el-button type="success" @click="switchLang()">更换语言</el-button><script>methods:{switchLang()  {if(this.$i18n.locale == 'en'){this.$i18n.locale = 'cn'}else{this.$i18n.locale = 'en'}}},
</script>

【vue 进阶指南一】多语言国际化（中英文切换）相关推荐

uni-app使用vue-i18n实现国际化(中英文切换)
uni-app使用vue-i18n实现国际化(中英文切换) 1.导入vue-i18n(npm install vue-i18n) 2.创建common文件夹 --> lang.js export ...
react国际化中英文切换
欢迎关注微信公众号:[ 全栈攻略 ] react项目需要支持国际化,推荐插件"react-intl-universal",原因是"react-intl"存在一些 ...
SpringMVC 国际化-中英文切换
国际化是为了实现不同地区页面呈现不同的语言问题: 编写程序实现国际化,在xml文件中做响应的配置,然后编写.properties文件即可. 实现登录界面的中英文切换: xml文件配置: <!-- ...
Qt Quick实现国际化中英文切换简明图文步骤
目录前言一.步骤 1.在pro文件中添加需要生成的ts文件: 2.通过工具-外部-语言家-update 生成zh_CN.ts和en_US.ts 3.通过语言家打开生成的ts文件进行翻译 4.将zh ...
vue中使用Vue-i18n插件实现页面中英文切换详细教程
1.在项目的根目录中安装插件 npm install vue-i18n 2.新建文件夹与文件存放自己配置的语言包,我这里新建的是lang文件夹 zh.js为中文语言包 en.js为英文语言包文件夹与 ...
Android国际化-中英文切换
不想废话,直接上干货 @Overrideprotected void attachBaseContext(Context newBase) {Locale newLocale;if (SPUtil.g ...
iPhone 手机怎么设置App Store的显示语言，中英文切换
苹果的 App Store 语言类型取决于你的 Apple ID 账号的国籍设置,它会根据你的 Apple ID 国籍自动调整 App Store 的语言显示.要想把 App Store 设置成中文, ...
QT 语言家中英文切换
环境: vs +qt msvc 创建ts文件第一种: 工具->QT VS Tools 选择第二种: 点击ok后,生成.pro文件打开.pro文件,在.pro文件中添加 TRANSLATIO ...
后台管理系统vue-i18n中英文切换功能
一.vue-i18n是什么? 一款针对Vue.js 的国际化插件.把网站的所有需要中英转换的数据配置成中英文json文件,需要编写大量中英文对照表,适合于少量的固定翻译. 二.使用步骤 1.安装vue ...

【vue 进阶指南一】多语言国际化（中英文切换）

vue + element-ui + vue-i18n 多语言国际化

教程开始

1.安装 vue-i18n 插件 (默认为最新版)

2.建立文件夹/文件

3.各文件代码

4.使用示例

更改中英文显示方式

【vue 进阶指南一】多语言国际化（中英文切换）相关推荐

最新文章

热门文章

【vue 进阶指南 一】多语言国际化（中英文切换）

vue + element-ui + vue-i18n 多语言国际化

教程开始

1.安装 vue-i18n 插件 (默认为最新版)

2.建立文件夹/文件

3.各文件代码

4.使用示例

更改中英文显示方式

【vue 进阶指南 一】多语言国际化（中英文切换）相关推荐

最新文章

热门文章

【vue 进阶指南一】多语言国际化（中英文切换）

【vue 进阶指南一】多语言国际化（中英文切换）相关推荐