Use vue-i18n to switch between Chinese and English-JS Tutorial-php.cn

Use vue-i18n to switch between Chinese and English

不言

Release： 2018-07-04 11:31:33

Original

1493 people have browsed it

This article mainly introduces the effect of using vue-i18n to switch between Chinese and English. It is very good and has certain reference value. Friends in need can refer to

vue-i18n warehouse address: https:// github.com/kazupon/vue-i18n

Compatibility:

Supports Vue.js 2.x or above

Installation method: (this Only npm is demonstrated everywhere)

npm install vue-i18n

Copy after login

Usage:

1. Introduce vue-i18n in main.js (the premise is that vue must be introduced first)

import VueI18n from &#39;vue-i18n&#39;
Vue.use(VueI18n)

Copy after login

2. Prepare local translation information

const messages = {
 zh: {
  message: {
  hello: &#39;好好学习，天天向上！&#39;
  }
 },
 en: {
  message: {
  hello: &#39;good good study, day day up!&#39;
  }
 }
}

Copy after login

3. Create a VueI18n instance with options

const i18n = new VueI18n({
 locale: &#39;en&#39;, // 语言标识
 messages
})

Copy after login

4. Mount i18n to the vue root instance

const app = new Vue({
 router,
 i18n,
 ...App
}).$mount(&#39;#app&#39;)

Copy after login

5. Use

<p id="app">
 <h1 style="font-size: 16px; text-align: center;">{{ $t("message.hello") }}</h1>
 </p>

Copy after login

in the HTML template to check the running effect:

The language identifier we just selected is "en" English, now change it to "zh" Chinese, and check the effect

const i18n = new VueI18n({
 locale: &#39;zh&#39;, // 语言标识
 messages
})

Copy after login

This way you can easily achieve internationalization. In actual development, there must be a lot of page content. We can put the corresponding language Information is saved as different json objects

const i18n = new VueI18n({
 locale: &#39;en&#39;, // 语言标识
 messages: {
  &#39;zh&#39;: require(&#39;./common/lang/zh&#39;),
  &#39;en&#39;: require(&#39;./common/lang/en&#39;)
 }
})

Copy after login

zh.js

// 注意：一定是 exports，不是 export，否则会报错，报错信息是下列的中的内容不是 string
module.exports = {
 message: {
  title: &#39;运动品牌&#39;
 },
 placeholder: {
  enter: &#39;请输入您喜欢的品牌&#39;
 },
 brands: {
  nike: &#39;耐克&#39;,
  adi: &#39;阿迪达斯&#39;,
  nb: &#39;新百伦&#39;,
  ln: &#39;李宁&#39;
 }
}

Copy after login

en.js

module.exports = {
 message: {
  title: &#39;Sport Brands&#39;
 },
 placeholder: {
  enter: &#39;Please type in your favorite brand&#39;
 },
 brands: {
  nike: &#39;Nike&#39;,
  adi: &#39;Adidas&#39;,
  nb: &#39;New Banlance&#39;,
  ln: &#39;LI Ning&#39;
 }
}

Copy after login

Next, when using it in the HTML template, pay special attention to the International writing

// HTML
<p id="app">
 <p style="margin: 20px;">
  <h1>{{$t("message.title")}}</h1>
  <input style="width: 300px;" class="form-control" :placeholder="$t(&#39;placeholder.enter&#39;)">
  <ul>
  <li v-for="brand in brands">{{brand}}</li>
  </ul>
 </p>
</p>
// JS
data () {
 return {
  brands: [this.$t(&#39;brands.nike&#39;), this.$t(&#39;brands.adi&#39;), this.$t(&#39;brands.nb&#39;), this.$t(&#39;brands.ln&#39;)]
 }
 },

Copy after login

Check the compilation effect:

Now change to English:

In the above operations, we switch languages by manually modifying the locale attribute value. In fact, we prefer that the browser automatically recognizes it. Here we can use cookie

1 to create a new cookie.js file. Used to read cookies

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
}

Copy after login

2. Introduce this js in main.js and obtain the browser language through the PLAY_LANG attribute

const i18n = new VueI18n({
 locale: getCookie(&#39;PLAY_LANG&#39;,&#39;zh&#39;), // 语言标识
 messages: {
  &#39;zh&#39;: require(&#39;./common/lang/zh&#39;),
  &#39;en&#39;: require(&#39;./common/lang/en&#39;)
 }
})

Copy after login

You need to pay attention to two extremely error-prone places here. :

(1). Write $t() as $()

(2). There are attributes with the same name in the same object in json

vue-i18n provides a global configuration parameter called "locale". By changing the value of locale, you can switch between different languages

The following case borrows the pop-up window style of Element UI. The above steps will not be described in detail. Just go to the core code.

// template
<h2>{{$t(&#39;test&#39;)}}</h2>
<button type="button" class="btn btn-success" @click="changeLocale">中文/EN</button>  

// js方法
changeLocale () {
 this.$confirm(this.$t(&#39;layer.toggle&#39;), this.$t(&#39;layer.tips&#39;), {
  confirmButtonText: this.$t(&#39;button.ok&#39;),
  cancelButtonText: this.$t(&#39;button.cancel&#39;),
  type: &#39;warning&#39;
  }).then(() => {
   let locale = this.$i18n.locale
   locale === &#39;zh&#39; ? this.$i18n.locale = &#39;en&#39; : this.$i18n.locale = &#39;zh&#39;
  }).catch(() => {
    this.$message({
     type: &#39;info&#39;,
     })  
  })
},

Copy after login

Effect:

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

The vue-cli project generates test packages and production packages according to the online environment

How to use Redux with Vue

Introduction to vue route interception and page jump settings

The above is the detailed content of Use vue-i18n to switch between Chinese and English. For more information, please follow other related articles on the PHP Chinese website!