Vue3设置i18n国际化踩坑

下载国际化插件

npm i vue-i18n@next
我用的是[email protected]的，vue3的话尽量下载最新版本的插件。

全局引入

在src下新建local文件夹，index文件下：

import { createI18n } from 'vue-i18n';
import zh_CN from "@/locales/lang/zh_CN";
import en_US from "@/locales/lang/en_US";
import App from './App.vue'
import { createApp } from 'vue'

const options = createI18nOptions();
const i18n = createI18n({
	locale,
    fallbackLocale: localeMap.zh_CN,
    messages: {
      zh_CN
      en_US
    },
    globalInjection: true, // 全局注入 $t 函数
    silentTranslationWarn: true, // 去掉警告
    missingWarn: false,
    silentFallbackWarn: true, //抑制警告
    legacy: false // 修复组件引入i18n时vite脚手架报错的问题
})
createApp(App).use(i18n)

然后直接在main.ts引入就行了

如果要在组件的script标签里面引入的话需要加上：

import { useI18n } from "vue-i18n"
const { t } = useI18n()

然后跟$t一样去使用。

另外当页面刷新的时候国际化就会被初始化，要使用localStorage来缓存之前用户设置的国际化的值。

坑点

如果在vue-i18n还没加载的时候在ts中使用，会报下面这个错：

SyntaxError: Must be called at the top of a setup function

所以要改成这样：

import { i18n } from '@/locales'
const { t } = i18n.global;

而且，每个vue文件如果要在js中使用国际化，都要引入一遍，有点不方便。

---

在国际化的变量中如果有特殊字符，如@，控制台会提示：

core-base.esm-bundler.js:1185 Message compilation error: Unexpected lexical analysis in token: 'EOF'

要把特殊字符用{''}来包裹。

---

还有一个最坑，我上面代码本来是这样写的：

// ...
async function createI18nOptions() {
  // ...
  const defaultLocal = await import(`./lang/${locale}.ts`)
  const message = defaultLocal.default?.message ?? {}
  
  return {
    messages: {
      message 
    },
    // ...
  };
}

const options = await createI18nOptions();
export const i18n = createI18n(options)

本地是没问题，但是当我去npm run build 的时候就报错：
Top-level await is not available in the configured target...
根据网上答案解决后发现发到线上直接白屏了。应该是还没兼容top await 的这种语法？