Vue の標準的な処理方法 (詳細なチュートリアル)

亚连
リリース: 2018-06-20 10:32:53
オリジナル
1186 人が閲覧しました

以下のエディターは、Vue での国際化処理方法を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。エディターをフォローして見てみましょう

1: まず、Vue-i8n をインストールします

npm install vue-i18n --save

注: -save-dev は、devDependency にパッケージ情報を追加することを指します。開発中に依存するパッケージ。 -save は、依存関係にパッケージ情報を追加し、公開時に依存するパッケージを示すことを意味します。

2: main.jsに情報を設定する

import VueI18n from 'vue-i18n'
import {getCookie} from './common/cookie' //引入一个js文件,使用引入的函数getCookie,根据当前缓存切换语言
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: getCookie('PLAY_LANG','cn-zh'), //根据当前语言切换
  messages: {
    'cn-zh': require('./language/cn-zh'), //中文语言包
    'en-us': require('./language/en-us') //英文语言包
  }
})
new Vue({
  el: '#app',
  i18n, // 不要忘记
  router,
  template: &#39;<App/>&#39;,
  components: { App }
})
ログイン後にコピー

3: srcディレクトリ下に新しい言語ファイルを作成し、できるだけmain.jsと同じ階層に格納し、2つのjsファイルを追加、cn-zh および en-us、翻訳する必要がある言語を保存します

4: getCookie 関数

function getCookie(name,defaultValue) {
  var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); //"(^| )" 匹配开头和空格
  if (arr = document.cookie.match(reg))
    return unescape(arr[2]);
  else
    return defaultValue;
}
export {
  getCookie
}
ログイン後にコピー

上記は、皆様のお役に立てれば幸いです。未来のみんなへ。

関連記事:

Vueで数値入力ボックスコンポーネントを実装する方法

jqueryを使用して左右のサイドバーのスケーリング効果を実現する方法

JS関数のsetTimeoutの詳細な紹介

mongooseではオブジェクトの更新について詳しく紹介されています

JavaScriptでAOPを実装する方法

nginx +ノードを使用してhttpsをデプロイする方法

以上がVue の標準的な処理方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート