遇到Uniapp配置meta不生效怎么解决

永恒资源网 www.yonghengzy.cn遇到了Uniapp 是一种基于 Vue.js 的跨平台应用开发框架，其开发简单、易上手，可以快速构建出 iOS、Android 和 H5 页面，成为现在移动应用开发的重要工具之一。然而，跨平台应用的开发也带来了一些问题，比如本文即是解决 uniapp 页面配置 meta 不生效的问题，希望对读者有所帮助。

问题描述

近期有开发者反馈在使用 uniapp 构建的 H5 页面中，配置 meta 标签没有生效，即在浏览器中查看网站源代码，找不到相应的 meta 标签。但在开发工具的预览中和手机端查看页面均能够正常显示。

问题解决

1、确认 meta 内容是否正确

首先需要确保 meta 标签的内容是否正确，在 uniapp 的 page.json 中配置：

"meta": {
  "viewport": "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no",
  "keywords": "uniapp, meta, 问题, 解决",
  "description": "uniapp 配置 meta 不生效的解决方法",
  "apple-mobile-web-app-capable": "yes",
  "apple-mobile-web-app-status-bar-style": "black",
  "format-detection": "telephone=no,email=no,address=no"
}

2、在 index.html 中添加 meta 标签

如果在 page.json 配置 meta 后在页面源代码中不存在相应的标签，需要在 uniapp 项目的 index.html 中将 meta 标签手动添加进去。例如，在 head 标签中添加 viewport 的 meta 标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

3、确认 uniapp 打包配置

如果在前两步中均未能解决问题，需要确认 uniapp 打包的配置，主要包括以下两个方面：

是否在 uniapp 的 manifest.json 中配置了打包的路径

manifest.json 是 uniapp 构建的配置文件，需要在其中设置打包的路径。具体而言，需要在 manifest.json 中的 weex > appboard > src 属性或 h5 > router > pages 属性中添加需要打包的页面路径。

// weex > appboard > src 示例
"weex": {
  "appName": "UniApp",
  "appBoard": "/index.vue",
  "pages": [
    "pages/tabbar/index/index",
    "pages/tabbar/quick-work/quick-work",
    "pages/tabbar/find/find",
    "pages/tabbar/mine/mine"
  ]
}
 
// h5 > router > pages 示例
"h5": {
  "custom": {
    "titleNView": true,
    "scrollIndicator": "none"
  },
  "router": {
    "mode": "hash",
    "pages": [
      {
        "path": "/",
        "style": {
          "navigationBarTitleText": "首页"
        },
        "query": "",
        "meta": {
          "viewport": "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no",
          "keywords": "uniapp, h5, 打包配置, manifest.json",
          "description": "uniapp 配置 meta 不生效的解决方法",
          "apple-mobile-web-app-capable": "yes",
          "apple-mobile-web-app-status-bar-style": "black",
          "format-detection": "telephone=no,email=no,address=no"
        }
      }
    ]
  }
}

是否在 uniapp 的 vue.config.js 中配置了打包的路径

除了在 manifest.json 中配置打包路径，也可以在 uniapp 项目的根目录中的 vue.config.js 文件中进行配置，主要是在 outputDir 和 pages 属性中进行设置：

module.exports = {
  outputDir: 'dist/h5',
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'Index Page',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
  }
}

以上为部分示例代码，具体请查阅官方文档或在开发过程中进行调试。

结论

在 uniapp 中配置 meta 标签后，如果在页面源代码中不存在相应的标签，需要手动在 index.html 中添加；如果打包后仍未生效，需要确认 manifest.json 和 vue.config.js 中的配置是否正确。希望本文解决了您的问题，也希望 uniapp 能够越来越完善，成为更加稳定、易用的开发工具。

下载说明：
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站日常活跃所需，积分可通过日常活跃免费获得！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励，同时还能获得对应的人气！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：http://www.yonghengzy.cn/blog/38133.html，转载请注明出处。

遇到Uniapp配置meta不生效怎么解决

问题描述

问题解决

结论

评论0

在线客服

升级VIP

每日签到

全屏浏览

夜间模式

繁简切换

返回顶部

问题描述

问题解决

结论

评论0

在线客服

升级VIP

每日签到

全屏浏览

夜间模式

繁简切换

返回顶部

社交账号快速登录

社交账号快速登录

社交账号快速登录