插件

i18n

国际化

在项目中创建 locales 文件夹，文件夹下创建 zh.ts 和 es.ts

locales
    es.ts
    zh.ts

locales
    es.ts
    zh.ts

es.ts

export default {
    welcome: 'welcome',
}

export default {
    welcome: 'welcome',
}

zh.ts

export default {
    welcome: '欢迎您',
}

export default {
    welcome: '欢迎您',
}

在 main.ts 文件中注册使用

import { createApp } from 'vue'
import { i18n } from '@gauss/core'
import App from './App.vue'
// 导入刚刚创建的文件
import zh from './locales/zh'
import es from './locales/es'

// 当结合框架使用时，请先注册框架后再注册国际化
createApp(App).use(i18n, {
    // 对应 messages 内的 key 值
    locale: 'zh',
    messages: {
        zh: zh,
        es: es,
    },
})

import { createApp } from 'vue'
import { i18n } from '@gauss/core'
import App from './App.vue'
// 导入刚刚创建的文件
import zh from './locales/zh'
import es from './locales/es'

// 当结合框架使用时，请先注册框架后再注册国际化
createApp(App).use(i18n, {
    // 对应 messages 内的 key 值
    locale: 'zh',
    messages: {
        zh: zh,
        es: es,
    },
})

在页面中使用

vue

<template>
    <div class="home">{{ $t('welcome') }}</div>
</template>

<script setup>
// useI18n 只能在 composition API 内使用
import { useI18n } from '@gauss/core'
const { t } = useI18n()
console.log(t('welcome'))
</script>

<template>
    <div class="home">{{ $t('welcome') }}</div>
</template>

<script setup>
// useI18n 只能在 composition API 内使用
import { useI18n } from '@gauss/core'
const { t } = useI18n()
console.log(t('welcome'))
</script>

国际化切换

vue

<template>
    <button @click="setI18n">切换</button>
</template>

<script setup>
import { setLocale } from '@gauss/core'

const setI18n = () => {
    setLocale('en')
}
</script>

<template>
    <button @click="setI18n">切换</button>
</template>

<script setup>
import { setLocale } from '@gauss/core'

const setI18n = () => {
    setLocale('en')
}
</script>

插件 ​

i18n ​

插件

i18n