1: 安装 vue-i18n
npm install vue-i18n
2: 创建语言文件
在src目录下新建lang文件夹,en.json为英文语言包,zh.json为中文语言包
文件的格式是这样的
// en.json
export default {
'name': 'name',
'user': 'user',
.....
}
// zh.json
export default {
'name': '姓名',
'user': '用户',
.....
}
3: 配置 vue-i18n 实例
import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
import zh from './config/zh';
import en from './config/en';
const i18n = new VueI18n({
locale: 'en',
fallbackLocale: 'en',
messages: {
en: require('./locales/en.json'),
zh: require('./locales/zh.json')
}
});
export default i18n;
4: 在组件中使用翻译消息
在Vue组件的模板中,使用
$t
方法来访问翻译消息,并在页面上显示文本内容:
<template>
<div>
<p>{
{ $t('name') }}</p>
<p>{
{ $t('user') }}</p>
</div>
</template>
5: 切换语言
<template>
<div>
<button @click="switchLanguage('en')">English</button>
<button @click="switchLanguage('zh')">中文</button>
<p>{
{ $t('user') }}</p>
<p>{
{ $t('name') }}</p>
</div>
</template>
methods: {
switchLanguage(lang) {
this.$i18n.locale = lang;
}
}
也可以把状态存到 localStorage 里面 这边更加方便