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>