Vue-i18n 前端国际化（手把手，老奶奶教程）

下载vue-i18n

npm install vue-i18n

创建你所需要的语言的js文件

cn.js如下图所示

 en.js 如下图所示

 hk.js同理。

在入口文件（main.js）中引入语言文件

在vue文件中使用

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
      <img src="../../assets/img/apple1.svg" style="height:55px;width:55px;float:left;margin-left:0 10px 0 10px" />
      <el-menu-item index="2">{{ $t('Top.index') }}</el-menu-item>
      <el-menu-item index="3">{{ $t('Top.iphone') }}</el-menu-item>
      <el-menu-item index="4">{{ $t('Top.Tv') }}</el-menu-item>
      <el-menu-item index="5">{{ $t('Top.notsbook') }}</el-menu-item>
      <el-menu-item index="6">{{ $t('Top.Airconditioner') }}</el-menu-item>
      <el-input :placeholder="$t('Top.input')" v-model="input" class="input1">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <div class="demo-type">
        <el-avatar :size="40" @error="errorHandler">
          <img src="../../assets/img/android-1.svg" />
        </el-avatar>
        <!-- <p style="float:right;font-size:18px">{{this.$route.query.username}}</p> -->
      </div>
      <span class="span_name">
        {{ this.$route.query.username }}
      </span>
      <el-dropdown @command="handleCommand" class="dropdown_locale">
        <span class="el-dropdown-link" style="color:#fff">
          {{ local }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="cn">{{ $t('Top.chinese') }}</el-dropdown-item>
          <el-dropdown-item command="hk">{{ $t('Top.character') }}</el-dropdown-item>
          <el-dropdown-item command="en">{{ $t('Top.English') }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-menu>

 切换语言

handleCommand(command) {
      console.log(command);
      const map = [
        [
          () => command == 'cn',
          () => {
            this.$i18n.locale = command;
          }
        ],
        [
          () => command == 'en',
          () => {
            this.$i18n.locale = command;
          }
        ],
        [
          () => command == 'hk',
          () => {
            this.$i18n.locale = command;
          }
        ]
      ]
      const target = map.find(m => m[0]())
      if (target) {
        target[1]();
      } else {
        console.log("NO")
      }
    },

运行

 

 谢谢大家！！！