Install the i18n, Ally

This article is for basic use only, please refer to the official documentation for more functions:

Github

Gitee

The VSCode extension searches for i18n Ally installations

Create a Vite project

The project created by Vite is used here. Add the library at vue-i18n@next

 yarn create vite
 ...
 √ Project name: ... i18n-demo
 √ Select a framework: » vue
 √ Select a variant: » vue-ts
 ...
 // 添加yarn add  vue-i18n@next
 yarn add vue-i18n@next
Copy the code

Creating multiple languages

Create locales folders for maintaining multiple languages

├ ─. Vscode ├ ─ public └ ─ SRC ├ ─ assets ├ ─ components └ ─ locales / / new └ ─ lang ├ ─ en └ ─ useful - CNCopy the code

Add user.ts to en and zh-cn folders, or use other formats

Format Read Write Annotations Note
JSON ✅ ✅ ✅
YAML ✅ ✅ ✅ Comments will NOT be preserved*
JSON5 ✅ ✅ ❌ Comments will NOT be preserved*
INI ✅ ✅ ❌ Comments will NOT be preserved*
properties ✅ ✅ ❌ Comments will NOT be preserved*
POT ✅ ✅ ❌
JavaScript ✅ ❌ ❌ Read-only
TypeScript ✅ ❌ ❌ Read-only
PHP ✅ ❌ ❌ Read-only

lang/en/user.ts

export default {
  name: "name".age: "age".height: "height".weight: "weight"};Copy the code

lang/zh-CN/user.ts

export default {
  name: "Name".age: "Age".height: "Height".weight: "Weight"};Copy the code

GlobEager (“./**/*.ts”); add index.ts to the lang file to export all multilingual files using vite const modules = import.meta. Export all files, here I only make plug-in instructions, so directly export.

lang/index.ts

import en from "./en/user";
import zh from "./zh-CN/user";

export default {
  en,
  "zh-CN": zh,
};

Copy the code

Export i18n

Create index.ts under locales/ and export the i18n instance. This is just a simple export and nothing else is done. In real projects where multiple languages need to be switched, it is best not to export all languages and export other languages when necessary.

locales/index.ts

import { createI18n } from "vue-i18n";
import messages from "./lang/index";

export const i18n = createI18n({
  locale: "zh-CN".fallbackLocale: "en",
  messages,
});

Copy the code

main.ts

import { createApp } from "vue";
import App from "./App.vue";
import { i18n } from "./locales/index";

createApp(App).use(i18n).mount("#app");

Copy the code

The above configuration in our code has been completed, so we can test it in app.vue first

<script setup lang="ts"> import {useI18n} from 'ue-i18n' const {t} = useI18n() </script> < the template > < div > < span > {(' name ')} {t} : < / span > < span > Pikachu < / span > < / div > < div > < span > {(' age ')} {t} : < / span > < span > 5 < / span >  </div> <div> <span>{{ t('weight') }}:</span> <span>50</span> </div> <div> <span>{{ t('height') }}:</span> <span>100</span> </div> </template> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>Copy the code

Enable i18n Ally

There are two ways to do this

  1. Set in VSCode Settings file
  2. Set in the project file

I’m going to go to the.vscode folder and add settings.json

.vscode/settings.json

{
    "i18n-ally.localesPaths": ["src/locales/lang"]."i18n-ally.keystyle": "nested"."i18n-ally.sortKeys": true.// "i18n-ally.namespace": true,
    // "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
    "i18n-ally.enabledParsers": ["ts"."json"]."i18n-ally.sourceLanguage": "en"."i18n-ally.displayLanguage": "zh-CN"."i18n-ally.enabledFrameworks": ["vue"."react"]}Copy the code

After setting it up, go back to app.vue and you can see that the plugin already displays the current language translation for us. Namespace and pathMatcher are disabled. These two enable namespaces. When enabled, the file name is mapped to the root directory of the I18N key. When exporting a multilingual file, add a key to the namespace. Otherwise, the plugin will recognize the incorrect locales/lang/index displayed on the page

import en from "./en/user";
import zh from "./zh-CN/user";

export default {
  en: {
      user: en // Add the corresponding key
  },
  "zh-CN": {
      user: zh
  },
};

Copy the code
/ / open before using the < div > < span > {(' name ')} {t} : < / span > < span > Pikachu < / span > < / div > / / open after using the < div > < span > {{t (' user. The name ')}} : < / span > <span> Pikachu </span> </div>Copy the code