1、安装
npminstall vue-i18n --S
2、创建实例
在src文件夹下创建一个language文件夹,用于创建i18n实例和语言包设置
其中,modules下存储不同的语言包,这里以中英文为例
en.ts:
export default {
homeTitle: "home",
aboutTittle: "about"
};
zh.ts
export default {
homeTitle: "首页",
aboutTittle: "关于"
};
其中,index文件下为:
import { createI18n } from "node_modules/vue-i18n/dist/vue-i18n";
import zh from "./modules/zh";
import en from "./modules/en";
const i18n = createI18n({
locale: "zh", // 设置当前语言类型
legacy: false, // 如果要支持compositionApi,这项必须设置为false
messages: {
zh,
en
}
})
export default i18n;
3、在main文件里引入
4、在根组件里绑定和配置
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import { useI18n } from "vue-i18n";
import {onMounted} from "vue"
const i18n = useI18n();
onMounted(() => {
i18n.locale.value = "zh"
});
const changeZh = () => {
i18n.locale.value = "zh"
}
const changeEn = () => {
i18n.locale.value = "en"
}
</script>
使用:
<RouterLink to="/">{{$t("homeTitle")}}</RouterLink>
<RouterLink to="/about">{{$t("aboutTitle")}}</RouterLink>
<el-button @click="changeZh">切换中文</el-button>
<el-button @click="changeEn">切换英文</el-button>