1. 什么是i18n

i18n 是“國際化”的簡稱。在資訊領域，國際化(i18n)指讓產品（出版物，軟件，硬件等）無需做大的改變就能夠適應不同的語言和地區(qū)的需要。

對程序來說，在不修改內部代碼的情況下，能根據不同語言及地區(qū)顯示相應的界面。

在全球化的時代，國際化尤為重要，因為產品的潛在用戶可能來自世界的各個角落。通常與i18n相關的還有L10n（“本地化”的簡稱）。

2. i18n安裝、配置及使用

2.1 安裝

npm i vue-i18n

2.2 配置

langs存放各語言文件

en.js

export default {messages:{home:'home',login:'login',userName:'userName',index:'index',monitor:'monitor',order:'order',census:'census',switchLanguage:'switchLanguage',date:'date',name:'name',address:'address'}
}

tc.js

export default {messages:{home:'首頁',login:'登錄',userName:'用戶名',index:'首頁',monitor:'數(shù)據監(jiān)控',order:'訂單信息',census:'統(tǒng)計管理',switchLanguage:'切換語言',date:'日期',name:'姓名',address:'地址'}
}

zh.js

export default {messages:{home:'首頁',login:'登錄',userName:'用戶名',index:'首頁',monitor:'數(shù)據監(jiān)控',order:'訂單信息',census:'統(tǒng)計管理',switchLanguage:'切換語言',date:'日期',name:'姓名',address:'地址'}
}

message.js

//語言包
import zh from './langs/zh'
import en from './langs/en'
import tc from './langs/tc' //繁體export default { //語言包zh,en,tc
}

index.js

import { createI18n } from 'vue-i18n'
import zh from './langs/zh'
import en from './langs/en'
import tc from './langs/tc'
const messages = {en,zh,tc
}
const i18n = createI18n({legacy:false,locale:localStorage.getItem('lang') ||'zh',messages
})
export default i18n

2.3 掛載到實例

import { createApp } from 'vue'
import i18n from './locals'
createApp(App).use(i18n).mount("#app")

2.4 組件中使用

<template><div>{{title}}<!-- 二種引入方式 --><div>{{$t('messages.userName')}}</div><div v-t="'messages.userName'"></div></div>
</template>

2.5 語言切換

<script setup>
import { useI18n } from 'vue-i18n'
const { locale } = useI18n();import { ref, reactive } from 'vue'
let title = ref('訂單信息');
const langArr = ['home', 'login', 'userName', 'index', 'monitor', 'order', 'census', 'switchLanguage', 'date', 'name', 'address'];
const changeLang = type => {locale.value = type;localStorage.setItem('lang', type)
}
</script><template><ul><li @click="changeLang('zh')">中文</li><li @click="changeLang('en')">英文</li><li @click="changeLang('tc')">繁體</li></ul><ul><li v-for="item in langArr" :key="item">{{ item + ':' }} {{ $t('messages.' + item) }}</li></ul>
</template><style scoped></style>

中文:

英文:

繁體: