Vue国际化实战：轻松实现多语言切换

 main.js全局配置

import VueI18n from 'vue-i18n'

import { messages } from '@/static/js/locales.js' // 你的翻译文件

Vue.use(VueI18n)

const i18n = new VueI18n({

  locale: 'en', // 设置默认语言

  messages, // 设置翻译信息

  silentTranslationWarn: true // 忽略翻译警告

})

new Vue({

  i18n,

  router,

  store,

  render: (h) => h(App)

}).$mount('#app')

 message.js文件

import en from './en';
import zh from './zh';

export const messages = {
  en,
  zh
};

zh.js文件 

export default {
  中国: '中国'
}

en.js文件 

export default {
  中国: 'China'
}

 应用文件

<div class="title" :class="$i18n.locale == 'zh' ? '' : 'title-en'">{{ $t('中国') }}</div>

<style lang="scss" scoped>
.title {
   width: 128px;
   height: 18px;
   font-family: Alibaba PuHuiTi;
   font-weight: 400;
   font-size: 18px;
   color: #FFFFFF;
   position: absolute;
   right: 0px;
   top: 24px;
 }
 .title-en {
     width: 148px;
     font-size: 12px !important;
     //可分别配置样式
 }
</style>