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 &#39;vue&#39;;
import { createI18n } from &#39;vue-i18n&#39;; // 引入vue-i18n组件
import { messages } from &#39;./config&#39;;
import globalConfig from &#39;@/config/index&#39;;

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 &#39;vue-i18n&#39;
//const { t } = useI18n() 

//正确写法
import { i18n } from &#39;@/locales/setupI18n&#39;;
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: &#39;Book Store&#39;,
    hint: &#39;Computer Science And Software Engineering&#39;,
    guessYouLike: &#39;Guess You Like&#39;,
  }
}
 
export default messages
const messages = {
  home: {
    title: &#39;书城&#39;,
    hint: &#39;计算机科学和软件工程&#39;,
    guessYouLike: &#39;猜你喜欢&#39;
  }
}
 
export default messages

index.js中存放如下模板

import { createI18n } from &#39;vue-i18n&#39;
import en from &#39;./en&#39;
import cn from &#39;./cn&#39;
 
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 &#39;vue&#39;
import App from &#39;./App.vue&#39;
import router from &#39;./router&#39;
import store from &#39;./store&#39;
import { setupI18n } from &#39;./lang/index&#39;
 
const app = createApp(App)
app.use(store).use(router).mount(&#39;#app&#39;)
 
setupI18n(app)

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

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

以上就是Vue3.0在组件外使用VueI18n的情况是什么的详细内容，更多请关注其它相关文章！