vue实现多语言项目（vue-i18n）

1、先安装依赖 npm install vue vue-i18n --save
2、在vue项目assets文件夹下新建一个 i18n 文件夹存放i18n要用的文件

3、新建lang文件夹存放语言包

/*静态文案中文zh.js*/
module.exports = {
    /*官网顶部文案*/
    header:{
        'out':'退出登录',
        'back':'返回首页'
    },
    /*后台登录页文案*/
    login:{
        'title' : '软件系统',
        'username' : '请输入用户名',
        'password' : '请输入密码',
        'login' : '登录',
        'language' : '请选择语言'
    }
}
/*静态文案英文en.js*/
module.exports = {
    /*官网顶部文案*/
    header:{
        'out':'logout',
        'back':'return index'
    },
    /*后台登录页文案*/
    login:{
        'title' : 'Software system',
        'username' : 'Please enter the user name',
        'password' : 'Please enter your password',
        'login' : 'Login',
        'language' : 'Please select language'
    }
}

4、新建一个index.js

import VueI18n from 'vue-i18n'   //引入vue-i18n
import Vue from 'vue'

Vue.use(VueI18n)
var locale;
localStorage.getItem('locale') ? locale = localStorage.getItem('locale') : locale = 'zh';//获取本地存储的locale值
const i18n = new VueI18n({
    locale: locale,    // 语言标识
    messages: {
        'zh': require('./lang/zh'),   // 中文语言包
        'en': require('./lang/en'),   // 英文语言包
       // 'jp': require('./lang/jp'),   // 日文语言包
        //'kr': require('./lang/kr')    // 韩文语言包
    },
})
export default  i18n

5、在main.js引入i18n并具名在vue

import i18n from './assets/i18n';
new Vue({
    router,
   store,
   i18n,     //挂载i18n
    render: h => h(App),
}).$mount('#app')

6、使用语言

<el-button type="primary" style="height: 28px;margin: 0 10px;padding:0 2px;line-height: 28px;" @click="changeLang">{{$t("header.out")}}</el-button>

//$t("header.out")
7、修改切换语言
changeLang(){
    if(this.$i18n.locale == 'zh'){
        this.$i18n.locale = 'en';
    }else{
        this.$i18n.locale = 'zh';
    }
    localStorage.setItem('locale',this.$i18n.locale);  //存入本地的locale值
}