1、安装 vue-i18n 依赖包
npm i vue-i18n
2、创建文件存储翻译的语言
在src/i18n/en.js中
export default {
login: 'login'
};
在src/i18n/zh.js中
export default {
login: '登录'
};
3、注册i18n实例
在src/i18n/index.js中
import { createI18n } from "vue-i18n";
// 本地语言包
import zhLocal from "./zh";
import enLocal from "./en";
//注册i18n实例并引入语言文件
const i18n = createI18n({
legacy: false,
locale: 'zh',
fallbackLocale: "zh",
silentTranslationWarn: true,
messages: {
zh:{...zhLocal} ,
en:{...enLocal}
},
});
export default i18n;
4、在main.js中引入i18实例
import i18n from "./i18n/index";
app.use(i18n).mount("#app");
5、在组件中使用
在模板中
<div>{{ $t('login') }}</div>
在js中
import { useI18n } from 'vue-i18n';
const { locale,t } = useI18n();
console.log(t('login')); // 登录
// 切换语言
const changeLanguage = val => {
locale.value = val;
};