vue国际化，同时样式变换（阿拉伯语版）

由于阿拉伯语与中文相反，中文从左向右，阿拉伯语与中文所有的一切都相反，如图所示：

英语

阿拉伯语

在进行英文与阿拉伯语切换，除了语言上体现不一样，布局也要进行变化，具体代码如下：

代码

language/en.js

export default {
  en: {
    slide1: {
      beeto: 'Beeto',
      born: 'Born in Arab',
      for: 'For Arab',
      info: 'all in lanbg jjfa jskf sjf jfj sjf  asjfiwjf jskfj sjfdalfw sjf asf asffj ',
      appstore: 'APP store',
      google: 'Goole Pay',
    },
  },
};

language/ar.js

export default {
  ar: {
    slide1: {
      beeto: 'الوقت',
      born: 'قاعدة',
      for: 'الترتيب',
      info: 'أنت المستخدم رقم هو المستخدم ال  هي المستخدمة ال ',
      appstore: 'الحالي',
      google: '!تهانينا',
    },
  },
};

utils/il18n.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import messages from '@/language/en';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // 设置默认语言环境
  fallbackLocale: 'en',
  messages,
});

export default i18n;
const loadedLanguages = ['en']; // 我们的默认语言

export function setI18nLanguage(lang) {
  i18n.locale = lang;
  document.querySelector('html').setAttribute('lang', lang);
  if (lang == 'ar') {
    document.querySelector('html').setAttribute('dir', 'rtl');
  } else {
    document.querySelector('html').removeAttribute('dir')
  }
  return lang;
}

export function loadLanguageAsync(lang) {
  if (i18n.locale !== lang) {
    if (!loadedLanguages.includes(lang)) {
      return import(/* webpackChunkName: "lang-[request]" */ `@/language/${lang}`)
        .then(msgs => {
          if (msgs.default) {
            i18n.setLocaleMessage(lang, msgs.default[lang]);
            loadedLanguages.push(lang);
            return setI18nLanguage(lang);
          }
        })
        .catch(() => console.log('import loaded failed'));
    }
    return Promise.resolve(setI18nLanguage(lang));
  }
  return Promise.resolve();
}

header.vue（使用方法）

<template>
  <div class="header">
    <div class="header-right">
      <div class="lanuage" @click="changeLanuage">{{ lang }}</div>
    </div>
  </div>
</template>
<script>
import { loadLanguageAsync } from '@/utils/i18n';
export default {
  name: 'Header',
  data() {
    return {
      lang: 'en',
    };
  },
  methods: {
    changeLanuage() {
      this.lang == 'en' ? (this.lang = 'ar') : (this.lang = 'en');
      loadLanguageAsync(this.lang);
    },
  },
  created() {
    loadLanguageAsync(this.lang)
  },
};
</script>
<style lang="less">
</style>

slider1.vue（具体体现）

<template>
  <div class="page">
    <div>
      <p class="text-right">
        <span>{{ $t('slide1.beeto') }}</span>
        <span>{{ $t('slide1.born') }}</span>
        <span>{{ $t('slide1.for') }}</span>
      </p>
      <p class="page-info">{{ $t('slide1.info') }}</p>
      <div class="page-btngroup">
        <div class="page-1-btn">
          <span>{{ $t('slide1.appstore') }}</span>
        </div>
        <div class="page-1-btn">
          <span>{{ $t('slide1.google') }}</span>
        </div>
      </div>
    </div>
    <div></div>
  </div>
</template>

<style lang="less">
html[lang='ar'] .text-right {
    text-align: right;
}
html[lang='ar'] .text-left {
    text-align: left;
}
</style>

另外阿拉伯语css在进行切换时，可以使用transform:scale(-1)完成布局切换