阅读:2491回复:1
Vue项目实战05:18n实现多语言自动切换-浏览器语言设置
什么是vue-i18n
i18n是 Internationalization 这个英文的简写,即国际化的意思,vue-i18n是一款针对于vue开发的国际化插件,让项目支持多语言切换,以适应不同地区用户的需求。 安装vue-i18n 直接在项目中执行安装命令:npm install vue-i18n --save 局引入vue-i18n 在项目中引入vue-i18n,实例化vue-i18n将需要加载的语言包通过require导入,这里看个人需求我只需要中英日文,所以引入zh-CN.js和en-US.js ja-JP.js,分别对应中文和英文 日文,你也可以提供多语言包,最后别忘记了将实例挂载至Vue。 步骤 1.在src下新建locale文件夹 在locale下建lang文件夹----用来存放自己设置的多语言文件 index.js 入口文件 index.js里放置内容如下 import Vue from 'vue' import VueI18n from 'vue-i18n' import { localRead } from '@/libs/util' import { Locale } from 'vant' import customZhCn from './lang/zh-CN' import customJaJp from './lang/ja-JP' import customEnUs from './lang/en-US' import zhCN from 'vant/lib/locale/lang/zh-CN' import enUS from 'vant/lib/locale/lang/en-US' import jaJP from 'vant/lib/locale/lang/ja-JP' Vue.use(VueI18n) // 自动根据浏览器系统语言设置语言 const navLang = navigator.language.substring(0, 2) const localLang = navLang || false let lang = localLang || localRead('local') || 'zh' Vue.config.lang = lang Vue.locale = () => {} const messages = { 'zh': Object.assign(zhCN, customZhCn), 'en': Object.assign(enUS, customEnUs), 'ja': Object.assign(jaJP, customJaJp) } // 实例化i18n并引入语言文件。 const i18n = new VueI18n({ locale: lang, // 语言标识 // 默认语言 messages }) const vantLocales = lang => { if (lang === 'zh') { Locale.use(lang, zhCN) } else if (lang === 'en') { Locale.use(lang, enUS) } else if (lang === 'ja') { Locale.use(lang, jaJP) } } vantLocales(i18n.locale) export default i18n import { localRead } from '@/libs/util' 由来 export const localSave = (key, value) => { localStorage.setItem(key, value) } export const localRead = (key) => { return localStorage.getItem(key) || '' } 在main.js里引入 并挂载 import i18n from '@/locale' Vue.use(i18n) new Vue({ router, i18n, // 挂载 render: h => h(App) }).$mount('#app') 定义语言包 语言包已json格式书写,数据以键值对的形式呈现,所以每个语言包的键都是对应的,只是值不想同,为避免编码问题问题,我们键统一用英文,所以创建语言包的时候我们先从英文开始,搞定之后直接复制再修改对应的值就好了,最后记得export导出对象。定义数据的形式可以根据个人需求来,我喜欢把相同的放一起,这样找起来方便点。如果你觉得每次都要通过lang来获取数据比较麻烦,我们可以再优化下,把export const lang=改写成module.exports= 模式,这样就可以直接获取对象中的对象了。 页面渲染 静态渲染时,用双大括号包裹,把数据当成变量引入,$t用来调用语言包中键对应的值。如果用的是element-ui动态绑定值,双引号即可。动态渲染时,我们可以借助计算属性,再拿这个计算属性去遍历DOM元素即可。 //动态渲染 computed:{ navlist(){ return this.$t('nav') } } 以上是根据浏览器自动切换语言 点击切换 //手动切换语言 change(){ if (this.$i18n.locale === 'zh-CN') { this.$i18n.locale = 'en-US'; localStorage.setItem('lang','en-US') }else { this.$i18n.locale = 'zh-CN'; localStorage.setItem('lang','zh-CN') } }, 可以参考这篇文章 https://www.shangyouw.cn/shezhi/arc59448.html |
|
沙发#
发布于:2023-07-12 14:05
|
|