vue3 和 vue2 對於使用多語言i18n的區別

1.vue3 的使用，需要安裝最新版的i18n，安裝一般在"^9.1.9"

npm install vue-i18n@next  
或
yarn add vue-i18n@next

2.在使用之前需要先創建語言的文件夾，並將其導出，例如

 

 langs可以放入你想要變化的任何語言，不止中文和英文，文件的內容JSON文件就是需要前面的變量相同，后面的值就是你當前語言的值

 

//en.json

{
  "Sunday":"Sunday",
  "Monday":"Monday",
  "Tuesday":"Tuesday",
  "Wednesday":"Wednesday",
  "Thursday":"Thursday",
  "Friday":"Friday",
  "Saturday":"Saturday"
}

//zh.json
{
  "Sunday":"星期日",
  "Monday":"星期一",
  "Tuesday":"星期二",
  "Wednesday":"星期三",
  "Thursday":"星期四",
  "Friday":"星期五",
  "Saturday":"星期六"
}

//index.js
import en from './en'
import zh from './zh'

export default {
  en,
  zh,
}

再創建一個i18n.js文件,做初始化操作

注意：里面存儲的Store.state.lang，我做了持久化的處理，如果你不做可以將它存到localStorage中

 

import  messages from '../langs/index'
import  {createI18n} from 'vue-i18n'
import Store from '../store/index'
import axios from 'axios'
import App from '../main'
export const  i18n = createI18n ({
    fallbackLocale: 'en', //沒有其他語言的情況下默認英文
    globalInjection:true, //在全局注入
    silentFallbackWarn: true,//抑制警告
    legacy: false, // you must specify 'legacy: false' option
    locale:Store.state.lang,
    messages
})

export  function setI18nLanguage () { //切換語言設置
  Store.state.lang = Store.state.lang=='en' ? 'zh' : 'en'; //只做中英文切換
  App.config.globalProperties.$i18n.locale=Store.state.lang; //修改App的原始屬性
  axios.defaults.headers.common['Accept-Language'] = Store.state.lang; //接口請求加上語言標志
  document.querySelector('html').setAttribute('lang', Store.state.lang); 
  Store.dispatch('changeload'); //刷新頁面
}

export function i18nText(val) { //導出語言切換使得在其他js文件中也能使用多語言
    try {
        const { t } = i18n.global 
        return t(val)  
    } catch (error) {
        console.log(error);
    }
}

然后在main.js中引入使用

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import {i18n} from './plugins/i18n'
import './plugins/metamask'

const app = createApp(App);

app.use(store).use(i18n).mount('#app');

export default app

這時就可以在vue頁面中使用了

{{$t('Saturday')}}

<script setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
console.log(t('Sunday'));
</script>

vue2 中使用 的版本是 "vue-i18n": "^8.27.0", 至於哪些版本可以在vue3和vue2中使用，沒有深究，有興趣的可以自己探索

1.就是下載

npm i vue-i18n@8.27.0 -D

2.就是和上面一樣建文件，不在贅述

3.在i18n.js文件使用

//i18n-setup.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from '@/langs/en/index.json'
import zh from '@/langs/zh-cn/index.json'
import axios from 'axios'
import store from '@/store'

Vue.use(VueI18n)

export const i18n = new VueI18n({
  locale: localStorage.getItem('lang') || 'en', // 設置語言環境
  fallbackLocale: localStorage.getItem('lang') || 'en',
  messages: {
    en,
    zh,
  } // 設置語言環境信息
})

const loadedLanguages = ['en', 'zh'] // 我們的預裝默認語言

export function setI18nLanguage (lang) {
  i18n.locale = lang
  localStorage.setItem('lang',lang)

  const langMap={
    zh:'cn',
    en:'en'
  }
  axios.defaults.headers.common['Accept-Language'] = langMap[lang]
  document.querySelector('html').setAttribute('lang', lang)
  return lang
}

export function i18nText(val) { //在其他的js文件中引入
  return i18n.t(val)
}

4.在main.js中引入

import { i18n } from '@/plugins/i18n'

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

5.在頁面中使用

{{$t('no-data')}}

<script>
    //無需引入直接使用
    console.log(this.$t('Sunday'))
    
</script>