vue中使用vue-vi18n项目国际化

--- highlight: a11y-dark

1. 下载

npm install vue-vi18n --save           
或者
yarn add vue-vi18n --save

2.src下新建文件夹i18n(可自行命名)

注意：locale文件夹中是准备好的语言数据

locale>index

 import { enBoxIntro, jaBoxIntro } from "./mugen/home";
import { enRequestInfo, jaRequestInfo } from "./mugen/request";
export default {
  en: { //将数据展开合并
    ...enBoxIntro,
    ...enRequestInfo,
  },
  ja: {
    ...jaBoxIntro,
    ...jaRequestInfo,
  },
};

home>index.js

export const enBoxIntro = {
  "home.boxIntro.current_remaining": "Remaining",
  "home.boxIntro.blind_box_price": "Price",
  "home.boxIntro.buyNow": "Buy Now",
  "home.boxIntro.solidOut": "Solid Out",
  "home.boxIntro.limited": "Limited pcs per figure",
};

export const jaBoxIntro = {
  "home.boxIntro.current_remaining": "残り",
  "home.boxIntro.blind_box_price": "ブラインドボックス価格",
  "home.boxIntro.buyNow": "購入",
  "home.boxIntro.solidOut": "Solid Out",
  "home.boxIntro.limited": "各種数量限定",
};

request>index

export const enRequestInfo = {
  "mugen.requestInfo.errorMessage": "Service device opened small",
};
export const jaRequestInfo = {
  "mugen.requestInfo.errorMessage": "サーバーが終了しました",
};

3.i18n>index.vue里面中代码

import Vue from "vue";
import VueI18n from "vue-i18n";

import locale from "./locales"; //语言包

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: "en", //默认是英文
  messages: {
    en: locale.en, //英文包
    ja: locale.ja, //日文包
  },
  silentTranslationWarn: false, // 是否关闭翻译报错;
});

export default i18n;

4.main中引用挂载----代码如下

import "lib-flexible"; //像素适配库（可不引）

import Vue from "vue";

import "normalize.css/normalize.css"; // A modern alternative to CSS resets

import "@/assets/styles/index.less"; // global css
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import App from "./App";
import router from '@/router/index.js'

import i18n from "./i18n"; //引入上述新建好的i18n中的东西

Vue.config.productionTip = false;

Vue.use(router)
Vue.use(ElementUI);


new Vue({
  el: "#app",
  render: h => h(App),
  router,
  i18n  //挂载
});

5.在其他页面中可利用下述代码更改语言

this.$i18n.locale  = 'ja' or 'en' //去更改便可成功

上述的办法是实现静态时多语言的切换，下面介绍一下，v-i18n与后端接口数据结合时的办法

实现思路： 第一步：写一个methods将两种语言从后端返回的数据中分别抽离出来，

第二步：抽离出来之后在分别存放到各自对应的语言池中

注意：

v-i18n通过$t(string)，如果语言池中存放的字符串他会对应取出，但如果存放的是array或者object，那么他只会取出对应的键值，没有我们想要的效果

解决办法：

将array或者object类型的数据存放到语言池的时候，通过JSON.stringfy()转换成字符串，取出来的时候JSON.parse()转换一下就好，但是此时控制台会报错，但好像对功能没什么影响，如果各位大神有什么解决办法，还可以告知一下我这个小菜鸟

首先我们后端给我返回的数据结构是：他是将两种语言放在一起，结尾以大写的E与J

下面是我写的一个方法，大家可根据后端返回的数据对应写，当然也可以要求后端数据结构

export const setWebLocal = (list, keyName) => {
    // 分离数据
    const pickupEnglishAndJapanes = (arr, condition, condition2) => {
        var newarr = []
        arr.forEach(item => {
            var obj = {}
            for (let k in item) {
                if (item[k] instanceof Array) {
                    obj[k] = pickupEnglishAndJapanes(item[k], condition, condition2)
                } else {
                    if (k.slice(k.length - 1) != condition) {
                        if (k.slice(k.length - 1) === condition2) {
                            obj[k.slice(0, k.length - 1)] = item[k]
                        } else {
                            obj[k] = item[k]
                        }
                    }
                }
            }
            newarr.push(obj)
        });
        return newarr
    }
    var enPackge = pickupEnglishAndJapanes(list, 'J', 'E')
    var jaPackge = pickupEnglishAndJapanes(list, 'E', 'J')
    // 设置语言包
    var jaobj = i18n.getLocaleMessage('ja')
    var enobj = i18n.getLocaleMessage('en')
    jaobj[keyName] = JSON.stringify(jaPackge)
    enobj[keyName] = JSON.stringify(enPackge)
    i18n.setLocaleMessage('en', enobj)
    i18n.setLocaleMessage('ja', jaobj)
}