VUE多语言i18n配置

多语言i18n配置"/>

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代码

<el-menu

        class="site-navbar__menu"

        mode="horizontal"

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

        <el-menu-item class="site-navbar__avatar" index="3">

          <el-dropdown trigger="click" class="international" @command="handleSetLanguage">

            <span class="el-dropdown-link"><img src="~@/assets/image/icon2.png" :alt="userName" />选择语言</span>

            <el-dropdown-menu slot="dropdown">

              <el-dropdown-item :disabled="language==='zh'" command="zh">中文</el-dropdown-item>

            <el-dropdown-item :disabled="language==='ja'" command="ja">Japanese</el-dropdown-item>

            </el-dropdown-menu>

          </el-dropdown>

        </el-menu-item>

      </el-menu>

<script>

import Cookies from 'js-cookie';

computed: {

    language() {

      return this.$store.state.language

    }

}，

handleSetLanguage(lang) {

      this.$i18n.locale = lang;

      Cookies.set('language', lang)；

      // 刷新页面

      window.location.reload();

      this.$message({

          message: '设置语言成功',

          type: 'success'

      })

    }

</script>

7、页面展示