vue如何使用多語言包外掛$i18n
阿新 • • 發佈:2021-07-16
怎麼使用語言包?
`
//第一步:
npm install vue-i18n
//安裝成功
`
第二步
在src檔案目錄下
構建 lang 語言資料夾,裡面新增中文和英文,裡面內容一致,

第三:新建index.js 在lang資料夾下面
import Vue from 'vue' import VueI18n from 'vue-i18n' import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang import enLocale from './en/index.js' import zhLocale from './zh/index.js' Vue.use(VueI18n) const messages = { en: { ...enLocale, ...elementEnLocale }, zh: { ...zhLocale, ...elementZhLocale }, } const i18n = new VueI18n({ // set locale // options: en | zh | es locale: localStorage.getItem('locale') || 'zh', // set locale messages messages }) export default i18n
在en和zh裡面各建檔案index.js
第四:構建資料結構

第五:元件引用:
第六:切換語言包:
<el-dropdown @command="handleCommandLang"> <div class="we-chat"> <span class="">{{$t('i18n')}}</span> <i class="el-icon-arrow-down"></i> </div> <el-dropdown-menu slot="dropdown" style="margin-top:-20px"> <el-dropdown-item command="zh"> 簡體中文</el-dropdown-item> <el-dropdown-item command="en"> English</el-dropdown-item> </el-dropdown-menu> </el-dropdown> methods: { handleCommandLang(type) { localStorage.setItem('locale', type) this.$i18n.locale = type; } }