uni-app 多语言 H5发布后页面标识语言会替换掉

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app 多语言 H5发布后页面标识语言会替换掉

开发环境 版本号 项目创建方式
Windows window 11 HBuilderX

操作步骤：

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8" />  
        <script>

预期结果：

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8" />  
        <script>

实际结果：

<!DOCTYPE html>  
<html lang="zh-CN">  
    <head>  
        <meta charset="UTF-8" />  
        <script>

bug描述：

index.html
页面头部信息
<html lang="en">
在运行到浏览器和打包后会替换调成
<html lang="zh-CN">
配置文件设置的是 英文 en  
哪位大佬解答下怎么设置

Image 1 Image 2 Image 3


Harmonyos Next教程
2 回复

哪位大佬解答下怎么设置


在uni-app中实现多语言支持，并在H5发布后确保页面标识语言不被替换，可以通过配置和代码管理来实现。以下是一个简要的实现示例：

1. 配置多语言资源

首先，在项目的pages.json中配置多语言资源文件路径，例如：

{
  "globalStyle": {
    "language": "zh-CN" // 默认语言
  },
  "tabBar": {
    // ...
  },
  "condition": {}
}

然后，在项目的根目录下创建locales文件夹，并在其中创建不同语言的JSON文件，如en-US.json和zh-CN.json：

// locales/en-US.json
{
  "hello": "Hello",
  "welcome": "Welcome"
}

// locales/zh-CN.json
{
  "hello": "你好",
  "welcome": "欢迎"
}

2. 在页面中引用多语言

在需要显示多语言内容的页面中，可以通过uni.getLocale()获取当前语言，并使用uni.setLocale()设置语言。以下是一个简单的示例：

// 在页面的onLoad或mounted生命周期中
onLoad() {
  const currentLocale = uni.getLocale();
  this.loadLocale(currentLocale);
},
methods: {
  loadLocale(locale) {
    const locales = require('../../locales/' + locale + '.json');
    this.$set(this, 'locales', locales);
  },
  changeLanguage(language) {
    uni.setLocale({
      name: language,
      success: () => {
        this.loadLocale(language);
      }
    });
  }
}

在模板中使用多语言：

<view>
  <text>{{ locales.hello }}</text>
  <text>{{ locales.welcome }}</text>
  <button @click="changeLanguage('en-US')">English</button>
  <button @click="changeLanguage('zh-CN')">中文</button>
</view>

3. 确保H5页面标识语言不被替换

在H5发布时，确保页面标识语言不被替换的关键在于正确配置服务器和HTML页面的meta标签。通常，HTML页面的meta标签中的content-language属性会被搜索引擎用于识别页面语言。例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Your page description">
  <meta http-equiv="Content-Language" content="en-US">
  <title>Your Page Title</title>
</head>
<body>
  <!-- Your page content -->
</body>
</html>

在uni-app中，这部分通常由构建工具（如Vite或Webpack）和服务器配置管理。确保在构建过程中不覆盖或修改这些meta标签。

通过上述步骤，你可以在uni-app中实现多语言支持，并确保在H5发布后页面标识语言不被替换。

回到顶部