vue如何使用语言包？

怎么使用语言包？

第一步：

npm install vue-i18n

安装成功

第二步

在src文件目录下

构建 lang 语言文件夹，里面添加中文和英文，里面内容一致，

image.png

第三：新建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

image.png image.png

第四：构建数据结构

image.png

第五：组件引用：

image.png image.png

第六：切换语言包：

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

image.png