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

2021-12-20 16:30:18 阅读：270 来源： 互联网

标签：国际化 locale loader 组件 vue i18n import

一、组件内建文案国际化

官方文档：国际化 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>

效果图

标签：国际化,locale,loader,组件,vue,i18n,import
来源： https://blog.csdn.net/qq_56042698/article/details/122041975

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9