vue3 ts配置多语言

配置多语言的的环境

npm install vue-i18n

在src文件下创建一个 i18n.ts

import { createI18n } from "vue-i18n";
import en from "../src/lang/en-US.json";
import hk from "../src/lang/zh-HK.json";
import ja from "../src/lang/ja-JP.json";
import ar from "../src/lang/ar-AE.json";

const i18n = createI18n({
  locale: "hk", // 默认语言
  fallbackLocale: "hk", // 后备语言
  messages: {
    en,
    hk,
    ja,
    ar,
  },
});

export default i18n;

一般情况下，我们在 TypeScript 文件中是不能直接使用 import 导入 JSON 文件的

处理

1.将json文件改成ts文件

文件内容大概为

export default {
  message: {
    home: '首页',
  },
}

引用：

<div>{{ $t('message.home') }}</div>

 

2.在tsconfig.json里面添加允许导入json

{
"compilerOptions": {
"resolveJsonModule": true,  //允许添加json
}
}

json文件内容

{
    home: '首页',
 },

引用：

<div>{{ $t('home') }}</div>