Vue3+TS+Vite development skills: how to support internationalization

Vue3 TS Vite Development Tips: How to Support Internationalization

Introduction
With the development of the information age, more and more applications need to support multiple languages ​​to meet the needs of users in different regions. In modern front-end development technologies such as Vue3 TS Vite, how to efficiently support internationalization? This article will introduce a common internationalization solution and give specific code examples for developers to refer to and learn from.

Text

1. Internationalization solution selection
   In the Vue3 TS Vite development environment, there are a variety of internationalization solutions to choose from. Among them, vue-i18n is a very popular international library, which provides rich features and simple and easy-to-use API. In this article, we choose to use vue-i18n for internationalization support.
2. Installation and configurationvue-i18n
   First, we need to install the vue-i18n library through npm or yarn:

npm install vue-i18n

Then, import and use vue-i18n in main.ts:

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App.vue'
import messages from './locales'

const i18n = createI18n({
  locale: 'zh-CN', // 默认语言
  messages,
})

createApp(App).use(i18n).mount('#app')

In the above code, we create a i18n instance and pass it as an option to the createApp function.

3. Configuring the language file
   Next, we need to create the language file in the locales folder. Each language file is a JavaScript object that contains key-value pairs used to store the translated text in the corresponding language.

├── locales
│   ├── en-US.js
│   └── zh-CN.js
├── App.vue
└── main.ts

Taking Chinese (Simplified) as an example, we create a zh-CN.js file and define the translation text in it:

export default {
  welcome: '欢迎使用Vue国际化示例',
  greeting: '你好，{name}',
}

4. Use internationalized text
   In the Vue component, we can reference the translated text through the $t function. In the template, you can use {{ $t('translated text') }} to display the translation results. In the code, you can get the translated text by this.$t('translated text').

<template>
  <div>
    <h1 id="t-welcome">{{ $t('welcome') }}</h1>
    <p>{{ $t('greeting', { name: '张三' }) }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$t('welcome'))
    console.log(this.$t('greeting', { name: '李四' }))
  },
}
</script>

5. Switch language
   We can use the locale attribute provided by the i18n instance to implement language switching. By modifying the value of i18n.locale, you can switch to different languages.

<template>
  <div>
    <div>
      <button @click="changeLang('zh-CN')">中文</button>
      <button @click="changeLang('en-US')">English</button>
    </div>
    <h1 id="t-welcome">{{ $t('welcome') }}</h1>
    <p>{{ $t('greeting', { name: '张三' }) }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    changeLang(lang) {
      this.$i18n.locale = lang
    },
  },
}
</script>

By clicking the button, we can switch languages, thereby dynamically changing the translated text displayed on the page.

Summary
By using the vue-i18n library, we can implement simple and easy-to-use internationalization functions in the Vue3 TS Vite development environment. This article introduces the installation and configuration of vue-i18n through sample code, as well as how to use and switch internationalized text. I hope this article will be helpful to everyone in terms of international support and can be applied and expanded in specific projects.

Code example: [https://github.com/example/vue-i18n-demo](https://github.com/example/vue-i18n-demo)

Reference Documentation:

• [vue-i18n official document](https://vue-i18n.intlify.dev/)
• [Vue 3 official document](https://v3 .vuejs.org/)
• [Vite official documentation](https://vitejs.dev/)

The above is the detailed content of Vue3+TS+Vite development skills: how to support internationalization. For more information, please follow other related articles on the PHP Chinese website!