Vue项目实战05：18n实现多语言自动切换-浏览器语言设置「建议收藏」
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 i18nimport { 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
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/135814.html原文链接：https://javaforall.cn
腾讯云开发者
