vue3安装使用i18n

安装i18n命令

npm install vue-i18n@next

main.js文件夹中全局注册

import i18n from './lang'

app.use(i18n)

在src下面创建lang文件夹

 en.js文件放置一点内容

需要注意的是export default  导出的  与 export const 变量 ={} 这两个导出使用的时候不一样容易出错

export default {
  messages: {
    username: 'username',
    password: 'password',
  }

}

zh.js文件放置内容

export default {
  messages: {
    username: '用户名',
    password: '密码'
  }
}

index.js文件配置内容

import { createI18n } from 'vue-i18n'
import { getStoredLanguage } from '@/utils/auth.js'

import elementZhLocale from 'element-plus/lib/locale/lang/zh-cn'
import elementEnLocale from 'element-plus/lib/locale/lang/en'

import zhLocale from './zh.js'
import enLocale from './en.js'

const messages = {
  'zh': {
    ...zhLocale,
    ...elementZhLocale
  },
  'en': {
    ...elementEnLocale,
    ...enLocale
  }
}
const ZH = getStoredLanguage() || 'zh'
const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: ZH,
  messages: messages
})

export default i18n

创建下拉选择语言文件

文件内容

<template>
  <div>
    <el-dropdown>
      <span>
        <el-icon>
          <DocumentCopy />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="item in languages">
            <span @click="handleSetLanguage(item.value)">{{ item.name }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import i18n from '@/lang/index.js'
import { setStoredLanguage } from '@/utils/auth.js'
const languages = reactive([
  {
    name: '简体中文',
    value: 'zh',
  },
  {
    name: 'English',
    value: 'en',
  },
]);
const handleSetLanguage = (lang) => {
  console.log(lang)
  i18n.global.locale = setStoredLanguage(lang)
  location.reload();
}
</script>

<style lang="scss" scoped></style>

 需要做本地存储  创建文件utils/auth.js

import Cookie from 'js-cookie'

const LangKey = 'LANG_KEY'

export function getStoredLanguage () {
  return Cookie.get(LangKey)
}

export function setStoredLanguage (lang) {
  return Cookie.set(LangKey, lang)
}

.vue文件中使用

<template>

  <div>

    {{ $t('button.edit') }}

    {{ t('messages.username') }}

  </div>

</template>

<script setup>

import { useI18n } from 'vue-i18n';

const { t } = useI18n()

</script>

<style lang="scss" scoped></style>