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