vue-i18n的使用,前端实现中英文切换

首先建个文件夹，结构是这样的，为了方便以后更改方便，强烈推荐的做法。

这里的en.js和zh.js就是中英文文件了，你要加其他语言继续加几文件就行。代码结构为这样,中英文结构要一致，变量名也要一样，这个你懂的

再看一下index.js这个文件负责的事情就是引入这两个文件，声明文件，最后暴露接口即可，主要是为了后期的其他js文件也能用到，我学习一向是先把代码弄上去，先实现，然后再去弄懂它的知识点。

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import Cookies from 'js-cookie';

Vue.use(VueI18n);
// 从手机app端写入cookie,然后取出来确定是什么语言。
// 我这里主要是不会去切换他，如果要切换，就i18n.locale去改。如果页面上有切换按钮就更简单了。
// Cookies.set('language', 'en');
const language = Cookies.get('language');

const i18n = new VueI18n({
  // 语言标识，后面会用做切换和将用户习惯存储到本地浏览器
  locale: language, //  语言标识
  messages: {
    'zh-CN': require('./config/zh'),
    en: require('./config/en')
  }
});

export default i18n;

接下来就是用了，怎么用才是关键

在整个项目所有的vue页面用，这个时候要咋main.js引入

在单文件中想引入某个在字段里，html部分这样$t('en或者zh中你设置的变量名')，

<div slot="header">
  <van-cell-group>
    <van-cell :title="$t('tabbarHome.popular')" isLink>
      <router-link to="/items/hot" class="text-desc">{{ $t('tabbarHome.morePopular') }}
      </router-link>
    </van-cell>
  </van-cell-group>
</div>

vue文件中js部分这样子取，此时是不用引入i18n的哦，因为已经全局使用了。。也是很方便，直接this.$t('en或者zh中你设置的变量名')

还有一种情况还会使用，就是单个js文件比如，封装好的request或者router路由，没准一些错误提示要英文，所以也得用，直接看代码。

import I18n from '@/language';
// 要引入才能用
service.interceptors.response.use(
  response => {
    const res = response.data;

    if (res.errno === 501) {
      // 用在这里
      Toast.fail(I18n.t('requestErrText.pleaseLogin'));
      removeLocalData();
      setTimeout(() => {
        window.location = '#/login/';
      }, 1500);
      return Promise.reject('error');
    } else if (res.errno === 502) {
      Toast.fail(I18n.t('requestErrText.insetErr'));
      return Promise.reject('error');
    }
    if (res.errno === 401) {
      Toast.fail(I18n.t('requestErrText.paramesErr'));
      return Promise.reject('error');
    }
    if (res.errno === 402) {
      Toast.fail(I18n.t('requestErrText.keyErr'));
      return Promise.reject('error');
    } else if (res.errno !== 0) {
      // 非5xx的错误属于业务错误，留给具体页面处理
      return Promise.reject(response);
    } else {
      return response;
    }
  },
  error => {
    console.log('err' + error); // for debug1
    removeLocalData();
    Dialog.alert({
      title: I18n.t('requestErrText.warn'),
      message: I18n.t('requestErrText.outTime')
    }).then(() => {
      window.location = '#/login/';
    });
    return Promise.reject(error);
  }
);

这就实现所有的中英文了。。其他高级功能就看文档去吧。。只要会了前边这些，其他都是小事。