一，安裝i18n的第三方庫:

liuhongdi@lhdpc:/data/vue/admweb$ npm install vue-i18n@next --save
npm http fetch GET 200 https://registry.npm.taobao.org/vue-i18n 837ms (cache revalidated)
npm http fetch GET 200 https://registry.npm.taobao.org/vue 76ms (cache revalidated)
npm http fetch POST 404 https://registry.npm.taobao.org/-/npm/v1/security/advisories/bulk 465ms
 

npm http fetch POST 404 https://registry.npm.taobao.org/-/npm/v1/security/audits/quick 453ms
 
up to date in 4s
 
72 packages are looking for funding
  run `npm fund` for details

說明：劉巨集締的架構森林是一個專注架構的部落格，地址：https://www.cnblogs.com/architectforest

對應的原始碼可以訪問這裡獲取：https://github.com/liuhongdi/
或:https://gitee.com/liuhongdi

說明：作者:劉巨集締 郵箱: [email protected]

二，建立i18n專用的目錄和檔案

module.exports = {
    menus: {
        Home: '首頁',
        Goods: '商品',
        User: '使用者',
        System: '系統',
    },
}

en.js

module.exports = {
    menus: {
        Home: 
 
'Home',
        Goods: 'Goods',
        User: 'User',
        System: 'System',
    },
}

index.js

//引入vue-i18n
import { createI18n } from 'vue-i18n'
//註冊i8n例項並引入語言檔案
const i18n = createI18n({
    //locale: 'ch',        //預設顯示的語言
    locale:localStorage.getItem('lang') || 'ch',
    messages: {
        //引入兩個語言檔案
        ch:require('./ch.js'),
        en:require('./en.js')
    }
})
//export
export default i18n;

三，main.js引用i18n

import i18n from './language/index'
...
//啟動app
const app = createApp(App)
app.use(ElementPlus,{locale})
app.use(store)
app.use(router)
app.use(i18n)
app.mount('#app')

四，在頁面中引用和在程式碼中引用:

<template>
  <div class="hello" style="background: #00ff00;">
    <h1>這是： 商品列表</h1>
    {{$t('menus.Home') }}
  </div>
</template>
<script>
export default {
  name: 'Home',
}
</script>

五，語言的切換:

    <el-dropdown style="margin-right: 15px;">
      <span style="height:40px;display: flex;align-items: center;justify-content:center;">
        <span class="nicknameclass" style="margin-left: 5px"> {{langName}} </span>
                    <i class="el-icon-arrow-down theme-icon-color"></i>
        </span>
      <template #dropdown >
        <el-dropdown-menu>
          <el-dropdown-item icon="el-icon-s-custom" @click="setLanguage('ch')">中文</el-dropdown-item>
          <el-dropdown-item icon="el-icon-table-lamp" @click="setLanguage('en')">English</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

import { useI18n } from 'vue-i18n'
...
  setup() {
    const { locale } = useI18n();
    const langName = ref('');

    const setLanguage = (lang) => {
      locale.value = lang;
      localStorage.setItem('lang', lang);
      ElMessage.success('語言切換成功');
      location.reload();
    };

    function getLangName(lang) {
        if (lang == 'ch') {
          return '中文';
        } else if (lang == 'en') {
           return 'English';
        }
    }
    onMounted(()=>{
      langName.value = getLangName(locale.value);
    });

    return {
      setLanguage,
      langName,
    };
},

六，效果演示：

七，檢視版本

liuhongdi@lhdpc:/data/vue/admweb$ npm list vue-i18n
[email protected] /data/vue/admweb
└── [email protected]

liuhongdi@lhdpc:/data/vue/admweb$ npm list vue@
[email protected] /data/vue/admweb
├─┬ @vue/[email protected]
│ └─┬ @vue/[email protected]
│   └── [email protected] deduped
├─┬ @vue/[email protected]
│ └── [email protected] deduped
├─┬ element[email protected]
│ └── vue@3.0.5 deduped
├─┬ vue[email protected]
│ └── vue@3.0.5 deduped
├─┬ vue[email protected]
│ └── vue@3.0.5 deduped
├── vue@3.0.5
├─┬ vue3[email protected]
│ └── vue@3.0.5 deduped
└─┬ vuex@4.0.0
  └── vue@3.0.5 deduped