vue国际化配置

vue项目如何实现国际化？分享一下基于vue-i18n实现国际化的经验

（1）安装

npm install vue-i18n --save

---

（2）配置main.js

main.js文件的配置，在main.js中添加以下跟vue-i18n的使用有关的配置项

main.js文件

import "ant-design-vue/dist/antd.css";
import "@/renderer/assets/global.scss";

import Vue from "vue";
import App from "./App.vue";
import router from "./router/router";
import store from "./store/index.js";
import VueI18n from "vue-i18n";
import VueElectron from "vue-electron";
import { errorCaptured } from "./utils/assist";

import "./plugins/andt-design-vue";
import "./plugins/vue-lazyload";

Vue.prototype.$errorCaptured = errorCaptured;
// if (!process.env.IS_WEB)
Vue.use(VueElectron);

Vue.config.productionTip = false;
Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: "zh", //切换语言
  messages: {
    zh: require("./language/language-zh.js"),
    en: require("./language/language-en.js")
  }
});

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

---

（3）配置语言文件

language-en.js

export const lang = {
  home: "home",
  name: "chinese",
  otherWay: "Other ways to log in",
  clickAvatar: "Click avatar log in",
  nextLogin: "Next Automatic Login",
  accountLogin: "Account Login",
  switchLanguage: "switch language",
  maintainSteam: "Please keep steam logged in",
  scanSuccess: "Scan success",
  phoneConfirmation: "Please confirm on your phone",
  returnQRcode: "Return to QR code",
  anonymousUser: "Anonymous user"
};

language-zh.js

export const lang = {
  home: "首页",
  name: "中文",
  otherWay: "其它方式登录",
  clickAvatar: "点击头像登录",
  nextLogin: "下次自动登录",
  accountLogin: "账号登录",
  switchLanguage: "切换语言",
  maintainSteam: "请保持STEAM登录",
  scanSuccess: "扫描成功",
  phoneConfirmation: "请在手机上确认登录",
  returnQRcode: "返回二维码",
  anonymousUser: "匿名用户"
};

---

(4)在组件中使用

html

    <div class="page-login-container">
        <div class="login-box" >
            <div class="not-me" @click="loginType">
              <div>{{ $t("lang.otherWay") }}</div>
            </div>
        </div>
    </div>
    <div class="test-drag">
      <a-button class="test-button" type="primary" @click="changeLaguages">{{
        $t("lang.switchLanguage")
      }}</a-button>
    </div>

---

js

 data: function() {
    return {
      lang: "zh",
    };
  },
 methods: {
  changeLaguages() {
      let lang = this.$i18n.locale === "zh" ? "en" : "zh";
      this.$i18n.locale = lang;
    }
}