vue3使用vue-i18n国际化（多语言转换）

原创已于 2022-09-02 18:38:21 修改 · 4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-09-02 18:37:32 首次发布

vue&elementui 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在 Vue3 项目中配置和使用 [email protected] 版本进行国际化。首先在 src 文件夹下创建 lang 文件夹，分别建立 cn.js 和 en.js 存储中文和英文翻译，再创建 index.js 导入并设置 i18n 对象。在 main.js 中引入并应用 i18n，通过 $t 方法在组件中调用翻译。

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

提醒：vue3要使用vue-i18n必须要9以上的版本 npm install vue-i18n@9.2.2

具体操作

在src文件下新建一个lang文件夹，里面分别建好“cn.js”、“en.js”、 “index.js”三个文件

cn.js和en.js中存放对应的翻译，例如：

const messages = {
  home: {
    title: 'Book Store',
    hint: 'Computer Science And Software Engineering',
    guessYouLike: 'Guess You Like',
  }
}

export default messages

const messages = {
  home: {
    title: '书城',
    hint: '计算机科学和软件工程',
    guessYouLike: '猜你喜欢'
  }
}

export default messages

index.js中存放如下模板：

import { createI18n } from 'vue-i18n'
import en from './en'
import cn from './cn'

const messages = {
  en, cn
}


const localeData = {
  legacy: false, // composition API
  globalInjection: true, //全局生效$t
  locale: cn, // 默认cn翻译
  messages
}

export function setupI18n (app) {
  const i18n = createI18n(localeData)
  app.use(i18n)
}

然后在main.js中使用setupI18n

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { setupI18n } from './lang/index'

const app = createApp(App)
app.use(store).use(router).mount('#app')

setupI18n(app)

使用的时候只需要在对应的地方写上 {{ $t("home.title") }} 就能使用了，需要特别注意的是必须使用$t开头，不能单独用t，如果需要单独用t的话需要其他的配置，直接用$t也比较方便，关于怎么单独使用t这里就不细说了

<span class="ebook-popup-title-text">
    {{$t("home.title")}}
</span>