vue3国际化

locales文件加下面 index.js
/* eslint-disable */
import { createI18n } from 'vue-i18n'; // import from runtime only
import { getLanguage } from '@/util/cookies';

import enLocale from './en';
import zhLocale from './zh-cn';
const messages = {
  en: {
    ...enLocale,
  },
  'zh-cn': {
    ...zhLocale,
  },
};
console.log(messages);

export const getLocale = () => {
  //读取cookie存入的当前语言
  const cookieLanguage = getLanguage();
  //如果有返回当前语言
  if (cookieLanguage) {
    return cookieLanguage;
  }
  //如果没有，获取系统语言
  const language = navigator.language.toLowerCase();
  //获取messages 语言 遍历
  const locales = Object.keys(messages);
  for (const locale of locales) {
    //如果messsage 包里面有系统语言返回
    if (language.indexOf(locale) > -1) {
      return locale;
    }
  }
  // 默认语言 简体中文
  return 'zh-cn';
};
const i18n = createI18n({
  globalInjection: true,
  legacy: false,
  locale: getLocale(),
  messages: messages,
});

export default i18n;

locales文件加下面 en.js
/* eslint-disable */
export default {
  login: {
    title: 'Login Form',
    logIn: 'Login',
    username: 'Username',
    password: 'Password',
    any: 'any',
    thirdparty: 'Or connect with',
  },
};

locales文件加下面 zh-cn.js
/* eslint-disable */
export default {
  login: {
    title: '系统登录',
    logIn: '登录',
    username: '账号',
    password: '密码',
    any: '随便填',
    thirdparty: '第三方登录',
  },
};

main.js
/* eslint-disable */
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import i18n from '@/locales/index';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
createApp(App).use(store).use(router).use(i18n).use(ElementPlus).mount('#app');

app.vue
<template>
  <div>
    <el-config-provider :locale="locale">
      <router-view />
    </el-config-provider>
  </div>
</template>

<script>
/* eslint-disable */
import elementZhLocale from 'element-plus/lib/locale/lang/zh-cn';
import elementEnLocale from 'element-plus/lib/locale/lang/en';
import { getLanguage } from '@/util/cookies';

export default {
  name: 'Home',
  components: {},
  watch: {
    '$i18n.locale'(newValue, oldValue) {
      console.log('我来了watch');
      this.locale = newValue == 'en' ? elementEnLocale : elementZhLocale;
    },
  },
  data() {
    return {
      locale: '',
    };
  },
  mounted() {
    this.locale = getLanguage() == 'en' ? elementEnLocale : elementZhLocale;
  },
  methods: {},
};
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

util文件夹下面  cookies.js
/* eslint-disable */
import Cookies from 'js-cookie';
let yuYanKey = 'yuYanKey';
export const getLanguage = () => Cookies.get(yuYanKey);
export const setLanguage = (language) => Cookies.set(yuYanKey, language);

第三方
 "element-plus": "^2.2.36",
    "js-cookie": "^3.0.1",
    "vue": "^3.0.0",
    "vue-i18n": "^9.2.2",