vue3项目中使用i18n国际化

weixin_45044818

已于 2022-04-01 22:21:57 修改

阅读量3.1k

点赞数 3

分类专栏： vue 文章标签： typescript 前端 vue

于 2022-03-28 22:51:07 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45044818/article/details/123808617

版权

本文介绍了在Vue3项目中实现i18n国际化的步骤，包括下载相关插件，创建并组织国际化文件，以及在模板和脚本中如何使用，同时提供了切换语言模式的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 下载插件

通过传统的npm i去下载

npm i vue-i18n

2. 创建国际化文件

1. 在src目录同级下，创建一个locales文件夹，之后在locales文件夹下创建i18n.ts文件(名字可根据自己的需求去取), i18n的文件内容如下

import {
    createI18n } from 'vue-i18n' // 引入vue-i18n组件
import ch from './zh-cn/zh-cn'
import en from './en/en'

const i18n = createI18n({
   
  locale: 'en', // 设置语言环境
  fallbackLocale: 'en', // 没有中文的话默认英文
  globalInjection: true, // 如果不设置为true挂载到全局的话，{
   {$t(`message.name`)}}这种使用会报错
  messages: {
   
    // 配置语言