antd vue组件国际化、业务文案国际化 i18n

一、组件内建文案国际化 

官方文档：国际化 LocaleProvider - Ant Design Vue (antdv.com)  官方文档 有些不需要的 我减去了 

先创建组件A  上代码：  

<template>
  <div>
    <div class="change-locale">
      <a-radio-group :value="locale" @change="changeLocale">
        <a-radio-button key="en" :value="enUS">
          English
        </a-radio-button>
        <a-radio-button key="cn" :value="zhCN">
          中文
        </a-radio-button>
      </a-radio-group>
    </div>
    <br>
    <a-config-provider :locale="locale">
        <div class="example">
          <a-pagination :default-current="1" :total="50" show-size-changer />
        </div>
    </a-config-provider>

  </div>
</template>
<script>
import enUS from 'ant-design-vue/es/locale/en_US';
import zhCN from 'ant-design-vue/es/locale/zh_CN';

export default {
  data() {
    return {
      locale: enUS,
      enUS,
      zhCN,
    };
  },
  methods: {
    changeLocale(e) {
      const localeValue = e.target.value;
      this.locale = localeValue;
    },

  },
};
</script>

上成果截图：

 实现上面的步骤总结：

1、在main.js中 引入    ConfigProvider  和使用  ConfigProvider

import { ConfigProvider} from 'ant-design-vue';
Vue.use(ConfigProvider);

2、在A 组件中 导入你所需要的 语言包  

import enUS from 'ant-design-vue/es/locale/en_US';

import zhCN from 'ant-design-vue/es/locale/zh_CN';

3、剩下的 看代码就可以

二、业务文案的国际化  i18n

官方文档：单文件组件 | Vue I18n (kazupon.github.io)

全局应用 某一个语言

  1、引入 i18n

npm install vue-i18n

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

 2、创建你需要的语言文件                                           文件内部代码

 

   3、在main.js 中创建实例对象  引入创建的js  本来打算放图片  放代码方便复制

import VueI18n from 'vue-i18n'
import LangENUS from './common/lang/en-us'
import LangZHCN from './common/lang/zh-cn'

Vue.use(VueI18n)


// 注册i18n实例并引入语言文件，文件格式等下解析

const i18n = new VueI18n({
  locale: 'zh',   //这里 配置默认语言
  messages: {
    'en': LangENUS,
    'zh': LangZHCN
  }
})


new Vue({
  el: '#app',
  
  i18n,   // 注意这里
  components: { App },
  template: '<App/>'
})

 4、组件中应用  语法需要  {{ $t('xx.xx')}}  

    <span>{{$t('title.home')}}</span>

    <a-button type="primary">
      {{$t('title.code')}}
    </a-button>

效果图：

     

三、面向Vue 组件的设计，你也可以更方便的分别控制每个组件的语言环境信息。

官方文档   看   单文件组件

1、安装 vue-i18n-loader

        为了使用 <i18n> 自定义块，你需要安装 vue-loader 和 vue-i18n-loader。如果你使用了单文件组件，vue-loader (opens new window)很可能已在项目中使用了，那么 vue-i18n-loader (opens new window)vue-i18n-loader (opens new window)必须另外安装：

npm i --save-dev @kazupon/vue-i18n-loader

2、在build 中找到  webpack  配置文件  大概是webpack.base.conf.js  尝试文档中的 两个方式

        我用的是  因为版本问题  

 options: {
          loaders: {
            // 你需要指定 `i18n` 的值为 `vue-i18n-loader`
            i18n: '@kazupon/vue-i18n-loader'
          }

 创建组件 D    用<i18n> 标签 

<i18n>
{
  "en": {
    "hello": "hello world!"
  },
  "zh": {
    "hello": "你好、世界！"
  }
}
</i18n>

<template>
  <div id="app">
    <label for="locale">locale</label>
    <select v-model="locale">
      <option>en</option>
      <option>zh</option>
    </select>
    <p>message: {{ $t('hello') }}</p>
  </div>
</template>

<script>

export default {
  name: 'D',
  data () { 
    return { 
           locale: 'en' 
        } 
    },
  watch: {
    locale (val) {
      this.$i18n.locale = val
    }
  }
}
</script>
    

 效果图