Vue3.0 在组件外使用 VueI18n 的问题

最新推荐文章于 2025-06-03 17:34:42 发布

mrhaoxiaojun

最新推荐文章于 2025-06-03 17:34:42 发布

阅读量9.6k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js typescript vuei8n i18n

本文链接：https://blog.csdn.net/mrhaoxiaojun/article/details/125267804

Vue 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了如何在Vue3中正确配置和使用vue-i18n，特别是在组合API的setup函数之外设置i18n实例。通过导入和注册全局i18n实例，避免了在组件setup外调用useI18n时出现的`Must be called at the top of a `setup``错误。示例代码展示了如何创建和安装i18n实例，确保与Vue3的组合API兼容。

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

通常将写在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;