vue実践---vueは外部資源に依存しないで簡単な多言語操作を実現します。

vueは多言語を使っていますが、vue-i 18 nが最も一般的です。しかし、開発中の多言語が少ないなら、例えば10個以上の言語がないと、vue-188 nを導入する必要がないです。とにかくコードの体積が大きいということになります。この時、単にvueで多言語を実現するのがいい選択です。
第一歩
まず一つのlocal es.jsを創立して、多言語のカバンの内容を保管します。ここにはzh-CSNという二つの言語しか書いていません。他にも追加したい場合は方法は同じです。コードは以下の通りです。

export default {
 'zh-CN': {
 name: '      '
 },
 'en': {
 name: 'I am English name'
 }
 }

第二のステップ
ブラウザの言語環境を通じて、対応する言語パッケージを取得し、言語パッケージの値をdataのlocarsに支払う。

data () {
 return {
 locales: (() => {
　　　　　　// this.lang         ，        lang             ，      ，         （navigator.language）
　　　　　　const lang = this.lang || navigator.language
  let useLang = /^zh/.test(lang) ? 'zh-CN' : /^en/.test(lang) ? 'en' : lang
  // Object.keys                         ，      lang          ，      zh-CN
  if (!Object.keys(locales).includes(useLang)) useLang = 'zh-CN'
  return locales[useLang]
 })(),
 }
 },

このlocarsは最終的に一つの対象に戻ります。例えば、中国語環境であれば、戻りデータは以下の通りです。

{
 name: '      '
}

第三歩
言語パッケージを全部取得した以上、言語パッケージから対応keyを取得する方法が残ります。

 methods: {
 $_t (key) {
  // this.locales        
  let localeStr = this.locales[key]
  return localeStr
 }
 }

を通してtこの方法は、keyに入ると、対応するvalueが得られます。
まとめ&最適化：
これにより、vue-i 18 nに依存しないという外部依存を実現し、vueだけを使って多言語を実現しました。
$uこの方法はmixinsに入れることができます。毎回この方法を導入することは避けられます。
具体的なコードはここを見ます。https://github.com/YalongYan/vue-practice/tree/master/vue-simple-multilingual
補足知識：vue-cli包装（npm run build）ERROR in x.js from UglifyJs Uexpected token：pnc（）が現れます。
前に包装しても大丈夫です。今回は間違えました。後には少なくなりました。Babelrcファイルは、ネットでいろいろな方法を探しましたが、その後は前の項目を見たら、少なくなりました。Babelrcファイルはルートディレクトリの下でこの書類を作成する限り、ファイルの内容は以下の通りです。

{
 "presets": [
 ["env", { "modules": false }],
 "stage-3"
 ]
}

ファイルの位置は下図を見てください。

以上のこのvue実践---vueは外部の資源に依存しないで簡単な多言語操作を実現するのは小編纂がみんなに与えるすべての内容です。