vue中使用vue-i18n简单实现国际化
新建vue项目
首先,新建一个vue项目,并成功运行
vue init webpack ‘项目名’
目录结构
目录结构如下,en.js和zh.js分别是英文和中文的文本信息。
main.js文件的配置,在main.js中添加以下跟vue-i18n的使用有关的配置项。
// en.js
const en = {
message: {
'100001': 'one,two,three,four',
'100002': 'like a song',
'100003': 'go,go,go'
}
}
export default en
// zh.js
const zh = {
message: {
'100001': '一二三四',
'100002': '像首歌',
'100003': '偶雷欧雷欧雷'
}
}
export default zh
// index.js
import en from './en'
import zh from './zh'
export default {
en,
zh
}
// i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './langs/index'
Vue.use(VueI18n)
/**
* 从localStorage中拿到用户的语言选择,如果没有,那么默认为中文
*/
const i18n = new VueI18n({
locale: localStorage.lang || 'zh',
messages
})
export default i18n
// main.js
...
import i18n from './locale/i18n/i18n'
...
new Vue({
...
i18n,
...
})
页面中如何使用。
<div class="hello">
<h1>{{ msg }}</h1>
<h2>{{ $t('message.100001') }}</h2>
<button @click="changeLanguage('zh')">中文</button>
<button @click="changeLanguage('en')">English</button>
<button @click="open">弹出框</button>
</div>
...
methods: {
changeLanguage (lang) {
if (lang === 'zh') {
this.$i18n.locale = 'zh'
} else {
this.$i18n.locale = 'en'
}
localStorage.setItem('lang', lang)// 存到localStorage中
},
open () {
alert(this.$t('message.100001')) // 在js中使用前面要加 this,message是我们在en.js中和zh.js中自己定义的,可修改
}
}
实现效果如图
一个极其简单的中英文切换就完成了,Finish!
项目链接: https://github.com/zhoufahai/-.git