Vue3.0在组件外使用VueI18n的情况

 更新时间:2023年04月19日 09:03:36   作者:mrhaoxiaojun  
这篇文章主要介绍了Vue3.0在组件外使用VueI18n的情况,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue3.0在组件外使用VueI18n

通常将写在setup里面的代码写在外面会报错

Must be called at the top of a `setup`

意思是必须写在setup里面

要将 i18n 与 Vue 3 的组合 API 一起使用,但在组件的 setup() 之外,需要这么写

// locales/setupI18n.ts

import { App } from 'vue';
import { createI18n } from 'vue-i18n'; // 引入vue-i18n组件
import { messages } from './config';
import globalConfig from '@/config/index';

const {
  setting: { lang: defaultLang },
} = globalConfig;

// 注册i8n实例并引入语言文件
const localeData = {
  legacy: false, // 使用CompotitionAPI必须添加这条.
  locale: defaultLang,
  messages,
  globalInjection: true,
};

export const i18n = createI18n(localeData);

// setup i18n instance with glob
export const setupI18n = {
  install(app: App) {
    app.use(i18n);
  },
};

这里是关键写法

//某个组合式js文件

//报错写法 Uncaught SyntaxError: Must be called at the top of a `setup` 
//import { useI18n } from 'vue-i18n'
//const { t } = useI18n() 

//正确写法
import { i18n } from '@/locales/setupI18n';
const { t } = i18n.global;

vue3使用vue-i18n国际化(多语言转换)

提醒: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>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue-cli 打包使用history模式的后端配置实例

    vue-cli 打包使用history模式的后端配置实例

    今天小编就为大家分享一篇vue-cli 打包使用history模式的后端配置实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue利用路由钩子token过期后跳转到登录页的实例

    Vue利用路由钩子token过期后跳转到登录页的实例

    下面小编就为大家带来一篇Vue利用路由钩子token过期后跳转到登录页的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 关于Vue3过渡动画的踩坑记录

    关于Vue3过渡动画的踩坑记录

    在开发中我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验,下面这篇文章主要给大家介绍了关于Vue3过渡动画踩坑的相关资料,需要的朋友可以参考下
    2021-12-12
  • 聊聊Vue中provide/inject的应用详解

    聊聊Vue中provide/inject的应用详解

    这篇文章主要介绍了聊聊Vue中provide/inject的应用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue2老项目vite升级改造过程记录

    vue2老项目vite升级改造过程记录

    目前vite主要默认是支持给vue3使用的,并且如果使用官方的cli创建的项目一样会默认使用vue3去构建项目,此时对于一些vue2的老项目就显得不友好了,下面这篇文章主要给大家介绍了关于vue2老项目vite升级改造的相关资料,需要的朋友可以参考下
    2022-12-12
  • 在vue3.0中封装button使用slot组件

    在vue3.0中封装button使用slot组件

    这篇文章主要介绍了在vue3.0中封装button使用slot组件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • Vue配置环境变量的正确打开方式

    Vue配置环境变量的正确打开方式

    这篇文章主要为大家介绍了Vue配置环境变量,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • Vue3系列之effect和ReactiveEffect track trigger源码解析

    Vue3系列之effect和ReactiveEffect track trigger源码解析

    这篇文章主要为大家介绍了Vue3系列之effect和ReactiveEffect track trigger源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • ElementUI多个子组件表单的校验管理实现

    ElementUI多个子组件表单的校验管理实现

    这篇文章主要介绍了ElementUI多个子组件表单实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 详解vue组件基础

    详解vue组件基础

    本篇文章给大家总结了vue组件基础的相关知识点以及代码实例,有需要的朋友可以学习参考下。
    2018-05-05

最新评论