切换语言的功能已经在上一步的Vue组件中实现了,即通过修改this.$i18n.locale的值来改变当前语言。你也可以将这个方法封装到一个全局的混入(mixin)或者Vuex中,以便在整个项目中复用。 5. 测试多语言切换功能 启动你的Vue项目,并测试多语言切换功能。点击按钮应该能够正确地切换语言,并显示对应的文案。 通过以上步骤,...
import{createApp}from'vue';importAppfrom'./App.vue';import{createI18n}from'vue-i18n';// 导入语言包importenfrom'./locales/en.json';importzhfrom'./locales/zh.json';// 创建i18n实例consti18n=createI18n({locale:'en',// 设置默认语言fallbackLocale:'en',// 设置备用语言messages:{en,zh,},})...
const i18n = new VueI18n({ locale: localStorage.getItem('lang'), // 默认语言 messages: { 'zh-CN': require('@/assets/langs/zh-CN.js'), 'en-US': require('@/assets/langs/en-US.js') }})//手动切换语言change(){ if (this.$i18n.locale === 'zh-CN') { this.$i18n.locale = '...
const { t, locale } = useI18n(); // 切换为中文 locale.value = 'zh'; 如此,我们便轻易完成了对于语言的管理和切换。因为 locale 本身也是一个 ref 对象,所以如果各位读者足够了解组件,可以将 locale 绑定到 input 的 v-model 上从而完成语言的选择。 en & zh编辑...
const i18n = new VueI18n({ locale: 'en', // 语言标识 messages: { 'zh': require('./common/lang/zh'), 'en': require('./common/lang/en') } }) zh.js // 注意:一定是 exports,不是 export,否则会报错,报错信息是下列的中的内容不是 string ...
为 Vue 的根实例设置语言环境信息// 通过选项创建 VueI18n 实例consti18n =newVueI18n({//基本常见,多语言网页,使用this.$i18n.locale="zh";可以修改对应的语言模式,其处理一般放在一个lang文件下//封装处理多个语言, 大小写均可,这就是messages对象里面的keylocale:'CN',// 首选语言缺少翻译时要使用的语言。
npm install element-plus vue-i18n -S --registry=https://registry.npmmirror.com 2、 定义语言文件包 定义 中文 文件 src/lang/en-us/index.js exportdefault{'modelname.demo.name':'heidi','manage.search.options.sysName':'system name',}
语言切换:通过 `i18n.global.locale` 切换 /* 切换语言 */exportfunctiontoggle(val:AvailableLocale){if(val===i18n.global.locale){return;}saveLocaleToLocalStorage(val);i18n.global.locale=val;location.reload();}
Vue.use(VueI18n); // 全局注册国际化包 // 准备翻译的语言环境信息 const i18n = new VueI18n({ locale: "zn", // 初始化中文 messages: { "zn":zn, "en":en } }); export default i18n 3、实现语言翻译 在main.js 中将 i18n 注入 vue 中 ...