vue3+i18n 國際化處理

yarn add vue-i18n

1. 創建i18n文件

/i18n/index.js

import { createI18n } from 'vue-i18n'
import mZhLocale from './lang/zh'
import mEnLocale from './lang/en'
import store from '@/store'

const messages = {
  en: {
    msg: {
      ...mEnLocale
    }
  },
  zh: {
    msg: {
      ...mZhLocale
    }
  }
}

/**
 * 返回當前 lang
 */
function getLanguage() {
  return store && store.getters && store.getters.language
}
const i18n = createI18n({
  // 使用 Composition API 模式，則需要將其設置為false
  legacy: false,
  // 全局注入 $t 函數
  globalInjection: true,
  locale: getLanguage(),
  messages
})

export default i18n

/i18n/lang/zh.js

export default {
  login: {
    title: '用戶登錄',
    loginBtn: '登錄',
  }
}

/i18n/lang/en.js

export default {
  login: {
    title: 'User Login',
    loginBtn: 'Login',
  }
}

 

 2. main.js中引用

 import i18n from '@/i18n';
app
  .use(store)
  .use(router)
  .use(i18n)
  .mount('#app')

 

3. store/index.js

import getters from './getters'
import app from './modules/app'

export default createStore({
  getters,
  modules: {
    app,
  }
})

 

store/getters.js

const getters = {
  language: state => state.app.language,
}
export default getters

 

store/modules/app.js

import { LANG} from '@/constant'
import { getItem, setItem } from '@/utils/storage'
export default {
  namespaced: true,
  state: () => ({
    language: getItem(LANG) || 'zh',
  }),
  mutations: {
    /**
     * 設置國際化
     */
    setLanguage(state, lang) {
      setItem(LANG, lang)
      state.language = lang
    },
  },
  actions: {}
}

 

以上就是基礎代碼，使用方式如下

在vue文件中

<template>
  <h2 class="title">{{ $t('msg.userInfo.title') }}</h2>
</template>

<script setup>
  const i18n = useI18n();
  i18n.t('msg.login.usernameRule')
</script>

在js文件中

import i18n from '@/i18n'
i18n.global.t('msg.login.passwordRule')