uni-app H5国际化问题

uni-app H5国际化问题

操作步骤：

问题1重现步骤： 底部：主页、组件、API、Scheme。切换到组件(这时网页的title显示组件正确)，然后切换到主页(这里网页title显示也正确)，然后切换语言“English”，这时网页的title变成了组件的title(bug复现)。

问题2重现步骤： 设置i18ndemo/pages.json中globalStyle:{“navigationStyle”: “custom”} 设置为H5不要导航。开发环境正常，打包后网页的title没有取对应语言值，直接显示了%xxxx%了。

预期结果：

问题1：tabBar切换后改语言网页显示当前tab的title。 问题2：H5隐藏导航栏打包发布也能显示对应语言的title

实际结果：

问题1：tabBar切换后改语言网页显示当前tab的title。 问题2：H5隐藏导航栏打包发布也能显示对应语言的title

bug描述：

uni-app生成H5后存在两个问题，使用i18ndemo可重现。 问题1：tabBar切换后改语言网页的title显示错误。 问题2：H5隐藏导航栏打包后网页的title没有翻译，直接显示成%xxxx%.

Image Image


更多关于uni-app H5国际化问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

问题确实存在，ios系统在TP钱包浏览器中浏览就会出现title显示&index.title&这种，无法正常显示标题，官方甚至都不愿意回答一下。

更多关于uni-app H5国际化问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 Uni-App 中实现 H5 页面的国际化（i18n）是一个常见的需求，通常涉及多语言切换、文本翻译等功能。以下是一个基本的实现步骤，帮助你在 Uni-App 中实现 H5 页面的国际化。

1. 安装 vue-i18n 插件

vue-i18n 是 Vue.js 的国际化插件，支持多语言切换和文本翻译。

npm install vue-i18n --save

2. 创建语言包

在项目中创建语言包文件，存放不同语言的翻译文本。

// lang/en.js
export default {
  welcome: 'Welcome',
  home: 'Home',
  about: 'About',
  // 其他文本
};

// lang/zh-CN.js
export default {
  welcome: '欢迎',
  home: '首页',
  about: '关于',
  // 其他文本
};

3. 配置 vue-i18n

在 main.js 或 main.ts 中配置 vue-i18n，并引入语言包。

import Vue from 'vue';
import App from './App';
import VueI18n from 'vue-i18n';
import en from './lang/en';
import zhCN from './lang/zh-CN';

Vue.use(VueI18n);

const messages = {
  en,
  'zh-CN': zhCN,
};

const i18n = new VueI18n({
  locale: 'zh-CN', // 默认语言
  fallbackLocale: 'en', // 回退语言
  messages,
});

new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app');

4. 在组件中使用国际化

在组件中使用 $t 方法获取翻译文本。

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <p>{{ $t('home') }}</p>
    <p>{{ $t('about') }}</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

5. 实现语言切换

可以在应用中添加语言切换功能，通过修改 locale 来实现语言的动态切换。

<template>
  <div>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('zh-CN')">中文</button>
  </div>
</template>

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

6. 处理路由和 URL

在 H5 页面中，可以通过 URL 参数或路径来指定语言。例如：

  • https://example.com/en/home
  • https://example.com/zh-CN/home

你可以在路由配置中处理语言参数，并根据参数动态设置 locale。

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/:lang/home',
      component: Home,
    },
    {
      path: '/:lang/about',
      component: About,
    },
    {
      path: '*',
      redirect: '/zh-CN/home',
    },
  ],
});

router.beforeEach((to, from, next) => {
  const lang = to.params.lang;
  if (lang) {
    i18n.locale = lang;
  }
  next();
});

export default router;

7. 处理 SEO 和多语言

对于 H5 页面，SEO 是一个重要的考虑因素。你可以通过以下方式优化多语言页面的 SEO：

  • 使用 <link rel="alternate" hreflang="en" href="https://example.com/en/home" /> 标签指定页面的多语言版本。
  • 在页面 <head> 中设置 <meta name="description" :content="$t('metaDescription')">。

8. 处理动态加载语言包

如果你的语言包很大，可以考虑动态加载语言包，以减少初始加载时间。

const loadLocaleMessages = async (locale) => {
  const messages = await import(`./lang/${locale}.js`);
  i18n.setLocaleMessage(locale, messages.default);
};

// 在切换语言时调用
changeLanguage(lang) {
  loadLocaleMessages(lang).then(() => {
    this.$i18n.locale = lang;
  });
}

9. 处理日期、时间、数字等格式

除了文本翻译，国际化还涉及日期、时间、数字等格式的处理。vue-i18n 提供了 dateTimeFormats 和 numberFormats 配置项来处理这些格式。

const i18n = new VueI18n({
  locale: 'zh-CN',
  messages,
  dateTimeFormats: {
    'en': {
      short: {
        year: 'numeric', month: 'short', day: 'numeric'
      },
      long: {
        year: 'numeric', month: 'long', day: 'numeric',
        weekday: 'long', hour: 'numeric', minute: 'numeric'
      }
    },
    'zh-CN': {
      short: {
        year: 'numeric', month: 'short', day: 'numeric'
      },
      long: {
        year: 'numeric', month: 'long', day: 'numeric',
        weekday: 'long', hour: 'numeric', minute: 'numeric'
      }
    }
  },
  numberFormats: {
    'en': {
      currency: {
        style: 'currency', currency: 'USD'
      }
    },
    'zh-CN': {
      currency: {
        style: 'currency', currency: 'CNY'
      }
    }
  }
});

10. 处理 RTL（从右到左）语言

如果你的应用需要支持 RTL 语言（如阿拉伯语），可以通过 CSS 和 dir 属性来处理。

<template>
  <div :dir="isRTL ? 'rtl' : 'ltr'">
    <h1>{{ $t('welcome') }}</h1>
  </div>
</template>

<script>
export default {
  computed: {
    isRTL() {
      return this.$i18n.locale === 'ar';
    },
  },
};
</script>
回到顶部