实现网站多国语言切换
1、导入依赖
npm i vue-i18n --save
2、main.js文件中引入
import { createSSRApp } from "vue";
import App from "./App.vue";
import { createI18n } from "vue-i18n";
import messages from "./lang";
const i18n = createI18n({
locale: "zh",//默认语言
globalInjection: true,//全局使用
legacy: false,//合法性。否则报错Not available in legacy mode
messages,//语言文件
});
export function createApp() {
const app = createSSRApp(App);
app.use(i18n).mount("#app");
return {
app,
};
}
createApp();
3、lang/index.js文件中，管理各语言文件
import enLocale from "./en";
import zhLocale from "./zh";
const messages = {
en: {
...enLocale,
},
zh: {
...zhLocale,
},
};
export default messages;
4、各语言文件内容
5、vue文件中使用
<div>{{ $t("route.dashboard") }}</div>
6、切换语言时
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
locale.value = "en";
