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

本文主要是介绍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里面使用

<divclass="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.echarts图表使用注意点（不要直接在option里面写死要在设置的时候再设置）直接在option里面先写死没用
在这里插入图片描述

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/51ad3fd153ed4fe5b47c64e3614aa0c1.png

 	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("上网收益"); // 图例