首先新建结构文件夹
1.下载i18n插件
npm install vue-i18n --save
2.配置i18n.js文件
import { createI18n} from 'vue-i18n'
import message from './langs'
const localeData = {
legacy: true, // composition API
locale: 'cn',
messages: message,
}
const i18n = createI18n(localeData);
export default i18n;
3.langs的index.js
import en from './us-en.js' //导入英文语言包
import cn from './zh-cn.js' //导入英文语言包
export default {
en: en,
cn: cn
}
4.中英文的语言包
zh-cn.js 中文语言包
import goods from './cn/goods.js'
var localeValues = {
menu: {
goods
}
};
export default localeValues;
因为整个项目的语言包会很庞大,为了后期的维护,我将每个模块都分了出去
langs/cn/goods.js
export default {
list:'产品列表'
}
us-en.js 英文语言包
var localeValues = {
menu: {
goods: {
list: 'goods list'
}
}
};
export default localeValues;
5.语言包准备好了之后,需要去main.js使用
6.到这语言包就导入完成了,并且可以实现翻译了,但是翻译的语言是固定的,不会动态切换
7.做一个切换按钮,在切换事件中 改变语言包
这是切换的按钮 @change是切换的事件
<a-radio-group v-model:value="locale" style="margin-left: 16px" @change="changeLanguage">
<a-radio-button key="en" value="en">English</a-radio-button>
<a-radio-button key="cn" value="cn">中文</a-radio-button>
</a-radio-group>
效果图:
切换事件调用的方法:
//切换语言
changeLanguage(){
this.$root.$i18n.locale = this.locale
this.$store.commit('setLanguage',this.locale)
},
核心:this.$root.$i18n.locale = this.locale 可以切换语言 this.locale是语言的标识(cn’,英文:‘en’)
8.需要在vuex里加上一个变量,用来标识现在是什么语言
切换方法
9.现在就实现了我们自定义的文字切换中英文,但是我们用的组件没有办法切换。我用的是antd,如果用的其他组件库可以去看看文档。
导入antd的国际化语言包
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import enGB from 'ant-design-vue/es/locale/en_GB';
在App.vue的最外层包裹上a-config-provider标签,并且加上:locale的属性
在data里声明变量
locale获取当前的语言是中文还是英文,之后要用来判断
在App.vue里写一个监听,监听vuex里的language,变了说明切换语言了,在监听里获取language来判断是中文还是英文。enGB和zhCN是我们导入的antd的包
watch: {
'$store.state.language'(newval, oldval) {
this.locale = this.$store.state.language
if (this.locale === 'en') {
this.language = enGB
} else {
this.language = zhCN
}
// console.log('===============================');
// console.log(this.language.Menu.Goods.goods_list);
}
},
在mounted里需要在获取一次进行判断,不然刷新页面就会变成默认的
这样就可以实现切换中英文啦!!!
10.在页面上使用翻译
以上内容是对翻译的配置,接下来如何在页面上使用呢?分别在vue2 vue3的写法使用
vue2:
因为我们在main.js已经配置了,页面上直接使用this.$t()就可以用了
在html部分
js部分:
vue3写法:
1.需要导入
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
2.在页面使用
js部分
html部分:
搞定!!!!!