vue-i18n 用于前端vue项目中,需要多语言切换的场景
安装方法(npm)
npm install vue-i18n
简单使用
1、在vue项目的main.ts文件中实例化 i18n
import VueI18n from 'vue-i18n'const i18n = new VueI18n({ locale: 'zh', // 语言标识 messages: { en: { test: { apple: 'apple', }, }, zh: { test: { apple: '苹果', }, }, }, })
Vue.use(VueI18n)
2、把 i18n 挂载到 vue 根实例上
new Vue({ router, store, i18n, render: h => h(App), }).$mount('#app')
3、在 HTML 模板中使用(简单示例)
这里通过修改 i18n的 locale 的属性值来切换语言
<template> <div> {{ $t('test.apple') }} <div> <button @click="switchLang">切换英文</button> </div> </div> </template> <script> export default { name: 'demo', methods: { switchLang() { this.$i18n.locale = 'en' }, }, } </script> <style></style>
4、效果如下
在实际项目中,往往是需要大段的翻译内容,这时候,我们需要将翻译文本分类,分文件以便于管理
具体结构可参考下图
其中i18n.js是将i18n实例化的代码
import Vue from 'vue' import VueI18n from 'vue-i18n'import zh from './zh/index.js' import en from './en/index.js'
Vue.use(VueI18n) let locale = 'zh' export default function(obj = {}) { return new VueI18n({ locale, // 设置地区 messages: { en, zh, ...obj }, // 设置地区信息 }) }
在main.js中挂载到vue实例上
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import createI18n from '@/assets/language/i18n.js' const i18n = createI18n() new Vue({ router, store, i18n, render: h => h(App), }).$mount('#app')
en和zh文件夹中的index.js其实都一样,用webpack的api —— require.context 实现自动化导入模块
const languagesModule = require.context('./languageModule', true, /\.js$/) const languages = languagesModule.keys().reduce((modules, modulePath) => { const name = modulePath.replace(/^\.\/(.*)\.js+$/, '$1') const value = languagesModule(modulePath) modules[name] = value.default return modules }, {}) export default { ...languages }
en和zh文件夹中的 languageModule 文件夹下的文件,都是以下的格式
export default { an_apple_a_day: '一天一个苹果,医生远离我', }
HTML模板中的使用情况及效果展示
<template> <div> {{ $t('test2.an_apple_a_day') }} <div> <button @click="switchLang">切换英文</button> </div> </div> </template> <script> export default { name: 'demo', methods: { switchLang() { this.$i18n.locale = 'en' }, }, } </script>
vue-i18n变量赋值
有时我们的不同翻译文本中有很多相同的语句,这时候我们可以把相同的提取出来,不同的用变量处理 或者 有时候我们的翻译中需要加入后端返回的数据,这时候也可以用到变量,
变量用法
用法很简单,这里只具体举一个例子展示
export default { // 这里切记括号里变量左右不能有空格!!! wait_and_try_again: '请等待{seconds}秒后再试', }
模板:
<p>{{ $t('test.wait_and_try_again', { seconds: 6 }) }}<p>
效果: