VUE国際A

背景

プロジェクトの背景

プロジェクトベースのVue +活字体+のiViewに、国際的な需要があり、現在は中国語と英語の言語をサポートしています。
国際化自体は支障なく、しかし、注意を払うにはまだ少しtypescriptですし、iViewの必要性、ここレコード。

ビュー-I18N

Vueの国際化はVue.js国際プラグインです。それは簡単にVue.jsアプリケーションにいくつかのローカライズ機能することができます。

使用する基本的な方法は、より導入しないだろう、これらの文書を参照してください。背後にあるいくつかの問題と解決策について説明します。

参照文献：

使い方

1. HTMLコードを使用しました

<span>{{$t('m.common.name')}}</span>

呼び出し$t方法を、パラメータが渡されたkey値を。m.common.name来るキー、我々は値で渡されたメッセージの国際化を見てください。

見てmain.js、内部の両方の言語で渡されたメッセージ文字列オブジェクトを。

const messages = {
  'zh-CN': require('../../static/locale/cn.js'),
  'en-US': require('../../static/locale/en.js')
}
const i18n = new VueI18n({ locale: lang, messages })

どこzh-CN値：

m = {
  common: {
    name: '名称'
  }
}

en-US値：

m = {
  common: {
    name: 'Name'
  }
}

ここでは、私は理解してどのようにそれが来ます！m.common.namekey

2. JSコードが使用されます

使用jsのコードの呼び出し$i18n.t方法

data () {
  return {
    btnName: this.$i18n.t('m.common.create')
  }
}

なお、HTMLとは異なり、再レンダリング、完全な言語の切り替えに使用されるロケール国際化スイッチ、HTML文字列、および文字列jsのコードを達成することができません。
オンライン文字列、または翻訳に完成ロケールモニタ時計の変更、で計算された上で取得する計画があります。
私は、スイッチングロケールを使用して、ここに持って、最初のロケールのクッキーがあり、そのページ、完全な国際化をリフレッシュ。

// 页面刷新
location.reload();

このアプローチには問題があるが、（現在のページを保持することはできません）が、国際iViewのコンポーネントを解決することができました。

コードを使用して3. TS

Tsはコードで国際化を使用し、それはエラーになります。
"TypeError: Cannot read property 't' of undefined"
国際化@Componentでの使用に置かれる必要がある、として、次のとおりです。

@Component({
  data () {
    return {
      btnName: this.$i18n.t('m.common.create')
    }
  }
})
export default class ResourcePoolPage extends Vue { }

データは単なる財産ではなく、複雑なオブジェクト場合でも、メソッドがメソッドで参照された場合でも、あなたもTSの利点を失う、その後、@Component年にデータとメソッドの両方を移動する必要はありません。次のメソッドは、この問題を解決することができます。

まずmain.ts、書き換えは、Vueのは、オブジェクトのウィンドウが存在します。

window['vm'] = new Vue({
  router,
  i18n,
  render: (h) => h(App), store: VuexStore }).$mount('#app')

時間tsを使用する必要

export default class ResourcePoolPage extends Vue { btnName2: string = window['vm'].$i18n.t('m.common.create') }

あなたがトラブルの疑いがある場合、あなたは翻訳の方法をパッケージ化することができ、あなたは、TSにして呼び出すことができます。

国際の4のiView

国際のiView国際へのiView、（表の国際列の例えば、）国際受信データのiView。

国際自身4.1のiView

でmain.ts完全に年：

import iview from 'iview'
import localeCN from 'iview/locale/zh-CN' import localeEn from 'iview/locale/en-US' const lang = VuexStore.getters.getLang // 获取当前的lang const locale = (lang === 'zh-CN') ? localeCN : localeEn Vue.use(iview, { locale })

4.2国際化データ

国際データは、ページのリフレッシュ動作をすることができ、以前のJS TS及び方法に従って、特殊な操作ではありません。次のように具体的なプロセスは、次のとおりです。

main.tsデフォルトは中国人ではない場合の初期値は、クッキーはLANGの設定を取得し読み込みます。
langは、変更後は、クッキー保存し、location.reload()ページを更新します。

参考：https://segmentfault.com/a/1190000020297356

背景