vue2 - i18n-前端实现多语言国际化
发布时间
阅读量：
阅读量
实现步骤：
- 安装
vue-i18n：
npm install vue-i18n@8
- 配置
vue-i18n：
在项目中设置 i18n，定义语言文件和静态资源的映射关系。
目录结构：
假设我们有两种语言（中文 zh_CN 和英文 en_US），分别有不同的图片或静态资源。
src/
├── i18n/
│ ├── langs/ # 语言包
│ │ ├── zh_CN/ # 中文翻译文件
│ │ │ └── zh_CN.js
│ │ ├── en/ # 英文翻译文件
│ │ │ └── en_US.js
│ └── i18n.js # i18n 配置
└── main.js # Vue 入口文件
i18n/i18n.js：
创建 i18n 配置文件来管理语言包：
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import zh_CN from './langs/zh_CN/zh_CN';
import en_US from './langs//* en *//en_US';
import enLocale from 'element-ui/lib/locale/lang/en';
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';
Vue.use(VueI18n);
const messages = {
en_US: {
...en_US,
...enLocale,
},
zh_CN: {
...zh_CN,
...zhLocale,
},
};
const i18n = new VueI18n({
locale: localStorage.lang || 'zh_CN',
messages,
});
export default i18n;
langs/zh_CN/zh_CN.js 和 langs/en/en_US.js：
语言包文件仅包含翻译文本，但可以根据需要扩展。
// zh_CN.js
module.exports = {
common: {
button: {
login: '登录',
resert: '重置'
}
},
menu: {
home: "首页"
}
}
// en_US.js
module.exports = {
common: {
button: {
login: 'login',
resert: 'resert'
}
},
menu: {
home: "home"
}
}
- 在组件中使用国际化的静态资源：
login.vue：
在组件中使用 $t() 函数动态加载静态资源，比如图片路径或其他资源。
<el-button type="primary">{{$t('common.button.login')}}</el-button>
<el-button type="info">{{$t('common.button.resert')}}</el-button>
- 切换语言的静态资源：
<template>
<div class="login-container">
<el-select v-model="value" placeholder="请选择您需要的语言" @change="switchLang">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
options: [{
value: 'zh_CN',
label: '中文简体'
}, {
value: 'en_US',
label: 'english'
}],
value: '中文简体',
}
},
methods: {
// 切换语言
switchLang(){
this.$i18n.locale = this.value; // 立即切换语言
localStorage.setItem('lang', this.value);
},
}
}
</script>
总结：
通过将静态资源路径也放入语言包中（例如图片路径），可以通过 vue-i18n 实现静态资源的国际化处理。当用户切换语言时，静态资源会动态更新，确保用户看到符合当前语言环境的资源。
全部评论 (0)
还没有任何评论哟~