vue中使用vue i18n国际化心得 - VicSh/my-web-log GitHub Wiki

导读

其实网上已经有很多类似的文章，也都写的很详细，但是由于和我项目中使用的情景有些出入，所以总结了以下几个方面，用以补充。

安装

npm install vue-i18n --save-dev

项目引用

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import enLocale from 'iview/dist/locale/en-US';
import zhLocale from 'iview/dist/locale/zh-CN';
import zhTLocale from 'iview/dist/locale/zh-TW';
// 国际化字典文件
import Locales from './locale';

Vue.use(VueI18n);

Vue.locale = () => {};

// 合并字典文件
const messages = {
    'en-US': Object.assign(Locales['en-US'], enLocale),
    'zh-CN': Object.assign(Locales['zh-CN'], zhLocale),
    'zh-TW': Object.assign(Locales['zh-TW'], zhTLocale)
};

const i18n = new VueI18n({
    locale: 'en-US',
    messages 
});

new Vue({
    el: '#app',
    i18n
});

全局使用

<div id="app">
  // 这里的hello对应字典中的key
  <p>{{ $t("hello") }}</p>
</div>

单个vue文件内部使用国际化

<i18n>
{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "こんにちは、世界！"
  }
}
</i18n>

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

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

或者

// locale.json 对应的是当前vue文件的国际化字典
<i18n src="locale.json"></i18n>

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

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

这里有个地方需要注意，如果要在单个文件中使用国际化标签<i18n>,vue-i18n的版本必须是6.X+才能支持，并且需要安装对应的loader进行解析， npm i --save-dev @kazupon/vue-i18n-loader 另外，在webpack配置文件中增加如下配置：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // you need to specify `i18n` loaders key with `vue-i18n-loader` (https://github.com/kazupon/vue-i18n-loader)
            i18n: '@kazupon/vue-i18n-loader'
          }
        }
      },
      // ...
    ]
  },
  // ...
}

或者在使用vue-cli生成vue项目的时候，webpack配置文件是这样的：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      // ...
    ]
  },
  // ...
}

这个时候，我们只需要给vueLoaderConfig添加这样一个属性就可以了

vueLoaderConfig.loaders.i18n = '@kazupon/vue-i18n-loader';
⚠️ **GitHub.com Fallback** ⚠️