Vue项目实现i18n国际化多语言切换方案实践

# 使用npm安装
npm install vue-i18n@next

# 使用yarn安装
yarn add vue-i18n@next

{
  "message": {
    "hello": "你好",
    "welcome": "欢迎使用本应用"
  }
}

{
  "message": {
    "hello": "Hello",
    "welcome": "Welcome to use this application"
  }
}

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

// 引入语言包
import zhCN from './locales/zh-CN.json';
import enUS from './locales/en-US.json';

const i18n = createI18n({
  legacy: false, // 使用 Composition API 模式
  locale: 'zh-CN', // 设置默认语言
  fallbackLocale: 'en-US', // 设置备用语言
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS
  }
});

const app = createApp(App);
app.use(i18n);
app.mount('#app');

<template>
  <div>
    <h1>{{ $t('message.hello') }}</h1>
    <p>{{ $t('message.welcome') }}</p>
  </div>
</template>

<template>
  <div>
    <button @click="switchLanguage('zh-CN')">中文</button>
    <button @click="switchLanguage('en-US')">英文</button>
    <h1>{{ $t('message.hello') }}</h1>
    <p>{{ $t('message.welcome') }}</p>
  </div>
</template>

<script>
import { useI18n } from 'vue-i18n';

export default {
  setup() {
    const { locale } = useI18n();

    const switchLanguage = (lang) => {
      locale.value = lang;
    };

    return {
      switchLanguage
    };
  }
};
</script>

{
  "message": {
    "greet": "你好，{name}！"
  }
}

{
  "message": {
    "greet": "Hello, {name}!"
  }
}

<template>
  <div>
    <p>{{ $t('message.greet', { name: 'Alice' }) }}</p>
  </div>
</template>

{
  "message": {
    "apple_count": "{count, plural, =0 {没有苹果} =1 {有1个苹果} other {有{count}个苹果}}"
  }
}

{
  "message": {
    "apple_count": "{count, plural, =0 {There are no apples} =1 {There is 1 apple} other {There are {count} apples}}"
  }
}

<template>
  <div>
    <p v-for="count in [0, 1, 5]" :key="count">{{ $t('message.apple_count', { count }) }}</p>
  </div>
</template>

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueI18n from '@intlify/unplugin-vue-i18n/vite';

export default defineConfig({
  plugins: [
    vue(),
    vueI18n({
      include: './src/locales/**',
      runtimeOnly: false
    })
  ]
});

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

// 引入语言包
import zhCN from './locales/zh-CN.json';
import enUS from './locales/en-US.json';

const browserLang = navigator.language.slice(0, 2);
const i18n = createI18n({
  legacy: false,
  locale: ['zh', 'zh-CN'].includes(browserLang)? 'zh-CN' : 'en-US',
  fallbackLocale: 'en-US',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS
  }
});

const app = createApp(App);
app.use(i18n);
app.mount('#app');