VUE多语言i18n配置

1、i18n官网

格式化 | Vue I18n

2、安装i18n

@8---指版本号

//  vue2必须安装8版本的i18n包，vue3必须安装9版本的i18n包。

npm i vue-i18n@8

3、卸载i18n

npm uninstall vue-i18n

4、安装 js-cookie

npm install vue-cookies --save

5、代码

5.1 main.js

// 语言插件

import  i18n  from './multi/index';

/* eslint-disable no-new */

export default new Vue({

  i18n,

})

5.2 创建多语言

index.js

import Vue from 'vue'

import Cookies from 'js-cookie';

import VueI18n from 'vue-i18n'

import jaLocale from './ja'

import zhLocale from './zh'

Vue.use(VueI18n);

const messages = {

    ja: {

        ...jaLocale

    },

    zh: {

        ...zhLocale

    }

};

const i18n = new VueI18n({

    // 设置语言 选项 en | zh

    locale: Cookies.get('language') || 'zh',

    // 设置文本内容

    messages

});

export default i18n;

zh.js

export default {

    btn:{

      add:'增加',

    },

  };

ja.js

export default {

  btn:{

    add:'ぞうか',

  },

};

6、Vue代码

        class="site-navbar__menu"

        mode="horizontal"

        style=" float: right;padding-right: 30px;border: 1px solid rgba(0, 0, 0, 0)">

       

         

            选择语言

           

              中文

            Japanese

           

         

       

     

7、页面展示