vue-i18n 使用方法

本文详细介绍了如何在Vue项目中实现国际化,包括安装vue-i18n,配置多语言切换,以及在.vue和.js文件中使用的方法。

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

1 先安装 npm install vue-i18n

2  新建文件assets/js/i18n.js

3  引入vue-i18n并注册到vue上

import VueI18n from 'vue-i18n'
import Vue from 'vue'
Vue.use(VueI18n)
let locale = 'zh-CN'
// 我这里进行了sessionStoraage配置
// sessionStorage.getItem('vuex') ? sessionStorage.getItem('vuex').language || 'zh-CN' : 'zh-CN'
let messages = {
    "zh-CN": {
         'loginOut': '登出'
    },
    "en-US": {
        'loginOut': 'sessionOut'
    }
}
export default new VueI18n({
  locale: locale,  // 语言标识
  messages: messages,
  silentTranslationWarn: true // 去除console中黄色报错
})

4  全局注册 在main.js 中

import i18n from './assets/js/i18n'
new Vue({
  el: '#app',
  i18n,
  components: { App },
  template: '<App/>'
})

  

5.
 
 在.vue 文件中使用方法
   1.   :placeholder="$t('loginOut')"
   2.   {{$t('loginOut')}}
 
 在.js 文件中使用方法
   import i18n from '../assets/js/i18n'
   i18n.t('loginOut')
  
  

转载于:https://www.cnblogs.com/guozongzhang/p/10790441.html

### ### 安装 vue-i18nVue 3 项目中集成 vue-i18n 时,首先需要通过 npm 或 yarn 安装 vue-i18n 包。可以使用以下命令进行安装: ```bash npm install vue-i18n@9 ``` 安装完成后,即可在项目中引入 vue-i18n 并进行配置 [^1]。 ### ### 配置 vue-i18nVue 3 项目中,需要通过 `createI18n` 函数创建 i18n 实例,并将其传递给 Vue 应用。以下是基本的配置步骤: 1. 在 `src` 目录下创建一个 `locales` 文件夹,用于存放不同语言的翻译文件。例如: - `en-US.json`:英文语言包 - `zh-CN.json`:中文语言包 2. 在 `main.js` 或 `main.ts` 中引入 vue-i18n 并配置多语言支持: ```javascript import { createApp } from 'vue' import { createI18n } from 'vue-i18n' import App from './App.vue' // 引入语言包 import enUS from './locales/en-US.json' import zhCN from './locales/zh-CN.json' // 创建 i18n 实例 const i18n = createI18n({ legacy: false, // 设为 true 可以兼容 Vue 2 的写法 locale: 'en-US', // 设置默认语言 fallbackLocale: 'en-US', // 设置回退语言 availableLocales: ['en-US', 'zh-CN'], // 支持的语言列表 messages: { 'en-US': enUS, 'zh-CN': zhCN } }) // 创建 Vue 应用并使用 i18n const app = createApp(App) app.use(i18n) app.mount('#app') ``` 通过上述配置,可以实现选项式和组合式 API 的混合使用 [^3]。 ### ### 使用 vue-i18nVue 组件中,可以通过 `$t` 方法访问翻译内容。例如,在模板中使用: ```vue <template> <div> <h1>{{ $t('welcome') }}</h1> <p>{{ $t('description') }}</p> </div> </template> ``` 同时,可以在脚本中通过 `useI18n` 函数访问 i18n 实例,例如: ```vue <script setup> import { useI18n } from 'vue-i18n' const { locale } = useI18n() // 切换语言 locale.value = 'zh-CN' </script> ``` ### ### 国际化语言支持的扩展 i18n 国际化支持的用法非常丰富,包括动态语言切换、复数形式、日期和数字格式化等。具体功能可以参考 vue-i18n 的官方文档 [^2]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值