1. 程式人生 > 其它 >vue如何使用多語言包外掛$i18n

vue如何使用多語言包外掛$i18n

怎麼使用語言包?

`
//第一步:

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