vue.js 3.0.5:用vue-i18n開發i18n國際化功能(vue-i18n@9.2.0)

一，安裝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

說明：作者:劉宏締 郵箱: [e-mail]

二，創建i18n專用的目錄和文件

在src下創建目錄:

language

目錄下創建三個js文件,

分別是:

ch.js

en.js

index.js

 

代碼：

ch.js

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')

四，在頁面中引用和在代碼中引用:

GoodsList.vue

<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>

js：

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,
    };
},

 

六，效果演示：

切換為英文時

切換為中文時

 

七，查看版本

查看vue-i18n的版本

liuhongdi@lhdpc:/data/vue/admweb$ npm list vue-i18n
admweb@0.1.0 /data/vue/admweb
└── vue-i18n@9.2.0-beta.7 

查看vue的版本

liuhongdi@lhdpc:/data/vue/admweb$ npm list vue@
admweb@0.1.0 /data/vue/admweb
├─┬ @vue/cli-plugin-babel@4.5.9
│ └─┬ @vue/babel-preset-app@4.5.9
│   └── vue@3.0.5 deduped
├─┬ @vue/compiler-sfc@3.0.5
│ └── vue@3.0.5 deduped
├─┬ element-plus@1.0.1-beta.20
│ └── vue@3.0.5 deduped
├─┬ vue-i18n@9.2.0-beta.7
│ └── vue@3.0.5 deduped
├─┬ vue-router@4.0.2
│ └── vue@3.0.5 deduped
├── vue@3.0.5
├─┬ vue3-count-to@1.0.10
│ └── vue@3.0.5 deduped
└─┬ vuex@4.0.0
  └── vue@3.0.5 deduped