Vue3 项目国际化实践

前言

当项目有海外市场的时候,实现多语言切换就很有必要啦

技术选型

业务代码可采用

vue-i18n

框架自带的文本官方一般都有相应的国际化处理😉,常见的语言包基本都具备~

例如:vant

复制代码
import {Locale} from 'vant'

Locale.use('zh-CN', zhCN);

实践

复制代码
const i18n = createI18n({
  locale:'cn',
  fallbackLocale: 'cn',
  messages: {
    cn: {
      message: {
        hello: 'hello world',
      },
    },
    ja: {
      message: {
        hello: 'こんにちは、世界',
      },
    },
  },
})

点击切换语言

复制代码
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const changeLang = () => {
    if (locale.value == 'cn') {
        locale.value = 'ja';
    } else {
        locale.value = 'cn';
    }
}

最后

多语言切换就实现啦😁

相关推荐
珍宝商店1 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown1 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip2 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿3 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.4 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰4 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息4 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
BTU_YC5 小时前
FastAPI+Vue前后端分离架构指南
vue.js·架构·fastapi
卷Java5 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
gihigo19985 小时前
在CentOS上配置SVN至Web目录的自动同步
前端·svn·centos