电子商务网站建设组织流程图,佛山优化网站推广,专业模板网站制作哪家好,深圳建设网站哪里好Vue3i18n多语言动态国际化设置 前言一、 i18n 介绍二、插件安装三、i18n配置3.1 创建i18n对应文件夹/文件3.2 en-US.js3.3 zh-CN.js3.4 index.js 四、 mian.js 引入 i18n配置文件五、 组件内使用六、使用效果 前言
继续【如何给自己的网站添加中英文切换】一文之后#xff0c… Vue3i18n多语言动态国际化设置 前言一、 i18n 介绍二、插件安装三、i18n配置3.1 创建i18n对应文件夹/文件3.2 en-US.js3.3 zh-CN.js3.4 index.js 四、 mian.js 引入 i18n配置文件五、 组件内使用六、使用效果 前言
继续【如何给自己的网站添加中英文切换】一文之后后续新开发项目在开发时就要进行多语言环境配置此文记录Vue3i18n使用的过程。
一、 i18n 介绍
i18nVue.js 的国际化插件。Vue I18n (kazupon.github.io)
它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中
二、插件安装
npm install vue-i18n9 --save
// or
yarn add vue-i18n9 --save注意需要注意的是vue3最好使用9.x以上的版本 三、i18n配置
3.1 创建i18n对应文件夹/文件 注意文件名可以随意但是后续需要对应上 3.2 en-US.js
export default {languageTxt: 简体中文, // 当前语言模式下 可切换的语言模式// 头部信息headTxt: {// 用户相关user: {name: ZhangSan,btnTxt: log out,},},// 菜单menuList: [{title: Home,},{title: User Management,},{title: Commodity management,},],
};3.3 zh-CN.js
export default {
export default {languageTxt: en-US, // 当前语言模式下 可切换的语言模式// 头部信息headTxt: {// 用户相关user: {name: 张三,btnTxt: 退出,},},// 菜单menuList: [{title: 首 页,},{title: 用户管理,},{title: 商品管理,},],
};注意en-US以及 zh-CN两个文件内的数据结构需要保持一致 3.4 index.js
import { createI18n } from vue-i18n;
import zhCN from ./locales/zh-CN;
import enUS from ./locales/en-US;let language localStorage.getItem(language) || navigator.language; // 获取本地存储 || 根据浏览器语言设置const i18n createI18n({legacy: false, // 使用Composition API这里必须设置为falselocale: language, // 默认显示语言globalInjection: true, // 全局注册$t方法messages: {zh-CN: zhCN,en-US: enUS,},
});export default i18n;四、 mian.js 引入 i18n配置文件 五、 组件内使用
// namespace: index
templatediv classindex-container展示locales配置的内容{{ $t(headTxt.user.name) }}!-- 切换语言模式按钮 --button clickchangeLanguage{{ $t(languageTxt) }}/button/div
/template
script
// 国际化
import { useI18n } from vue-i18n;
export default {name: index,setup() {const I18n useI18n();let { locale } I18n;// 可以拿到我们当前设置的默认语言切换语言更改locale.value的值即可// 但要跟你language/index.js中message设置的key的值一致// 如果有需要可以在store中配置一个然后全局使用/*** 切换语言*/const changeLanguage () {locale.value locale.value zh-CN ? en-US : zh-CN; // 切换中英文};return { locale, changeLanguage };},
};
/script
style langscss scoped
.index-container {
}
/style注意$t为i18n所调用方法全局引入即可用 六、使用效果
中文模式下展示的按钮是英文
英文模式下展示的按钮是中文
