vue3使用vue-i18n（最全攻略踩坑记）

1.安装vue-i18n

"vue-i18n": "^9.2.2",

2.新建locales目录

3.新建index.js

// 导入你的本地化消息文件
import { createI18n } from "vue-i18n";
import enMessages from "./en.json";
import zhCNMessages from "./zh-CN.json";
import thTHMessages from "./th_TH.json";

// 创建 i18n 实例
const i18n = createI18n({
    locale: "zh-CN", // 设置默认语言
    fallbackLocale: "en", // 当没有指定语言时的回退语言
    messages: {
      en: enMessages,
      "zh-CN": zhCNMessages,
      "th-TH": thTHMessages,
    },
    legacy: false,
  });
  export { i18n }

en.json

{
  "累计发电量": "Accumulated power generation",
 }

4.main.js

import { i18n } from '@/locales/index.js';
app.use(store).use(router).use(i18n).mount("#app");

5.template里面使用

<div
      class="big-title"
      style="margin-top: 8px"
      v-if="state.notRecommendList.length > 0"
    >
      {{ $t(" 常见问题") }}
    </div>

6.js里面使用

import { i18n } from '@/locales/index.js';
  data: [
          { value: 1048, name: i18n.global.t("上网电量") },
          { value: 735, name: i18n.global.t("自发自用电量") },
        ],

7.切换语言

  if (store.state.language == "zh") {
    proxy.$i18n.locale = "zh-CN";
  } else if (store.state.language == "th") {
    proxy.$i18n.locale = "th-TH";
  } else if (store.state.language == "en") {
    proxy.$i18n.locale = "en";
  }

8.echarts图表使用注意点（不要直接在option里面写死要在设置的时候再设置）直接在option里面先写死没用

 	state.optionC.xAxis[0].data = timeList; // X轴数据
      state.optionC.series[0].data = dataA; // 节省电费
      state.optionC.series[1].data = dataB; // 上网收益
      state.optionC.yAxis[0].name = i18n.global.t("元"); // Y轴单位
      state.optionC.series[0].name = i18n.global.t("节省电费"); // 图例
      state.optionC.series[1].name = i18n.global.t("上网收益"); // 图例

效果