«

uniappX 使用 lime-i18n 插件适合新手小白

离离源上 发布于 阅读:3329 UniappX


1、按照官方文档步骤导入到项目

2、main.uts代码如下

import App from './App.uvue'

import { createSSRApp } from 'vue'
// main.uts
import { createI18n } from '@/uni_modules/lime-i18n'
//目录自己决定
import zhCN from './locales/zh_CN'
import enUS from './locales/en_US'

console.info(zhCN)
const i18n = createI18n({
    // 使用uni.getStorageSync('uVueI18nLocale') 能获取上次退出应用后保存的语言
    locale: 'zh_CN', // 默认显示语言
    fallbackLocale: 'en_US',
    messages: {
        'zh_CN': zhCN,
        'en_US': enUS
    }
})
export function createApp() {
    const app = createSSRApp(App)
    app.use(i18n)
    return {
        app
    }
}

注意语言的下划线和减号,一定要对应

3、语言包文件命名和位置

4、zh_CN.uts内容

const messages = {
    "你好": {
        "世界!": "你好世界!"
    }
}

export default messages

5、en_US.uts内容

const messages = {
    "你好": {
        "世界!": "hello world!"
    }
}

export default messages

6、index.uvue内容

<template>
    <view>
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text>测试:{{ $t('你好.世界!') }}</text>
            <button @click="$locale.value = $locale.value != 'zh_CN' ? 'zh_CN' : 'en_US'">切换{{$locale}}</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {
            console.info(this.$locale.value)
        },
        methods: {
        }
    }
</script>

<style>
    .logo {
        height: 100px;
        width: 100px;
        margin: 100px auto 25px auto;
    }

    .title {
        font-size: 18px;
        color: #8f8f94;
        text-align: center;
    }
</style>

好了,结束了!适合新手

UniappX

请先 登录 再评论