uniapp 是一种基于 vue.js 的跨平台应用开发框架，其开发简单、易上手，可以快速构建出 ios、android 和 h5 页面，成为现在移动应用开发的重要工具之一。然而，跨平台应用的开发也带来了一些问题，比如本文即是解决 uniapp 页面配置 meta 不生效的问题，希望对读者有所帮助。
问题描述
近期有开发者反馈在使用 uniapp 构建的 H5 页面中，配置 meta 标签没有生效，即在浏览器中查看网站源代码，找不到相应的 meta 标签。但在开发工具的预览中和手机端查看页面均能够正常显示。
问题解决
- 确认 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"
}其中，viewport、keywords、description 是必要的 meta 标签，可添加其他的 meta 标签进行个性化配置。
- 在 index.html 中添加 meta 标签
如果在 page.json 配置 meta 后在页面源代码中不存在相应的标签，需要在 uniapp 项目的 index.html 中将 meta 标签手动添加进去。例如，在 head 标签中添加 viewport 的 meta 标签：
如果需要添加其他的 meta 标签，可参考第 1 步中的配置。
bee餐饮点餐外卖小程序是针对餐饮行业推出的一套完整的餐饮解决方案，实现了用户在线点餐下单、外卖、叫号排队、支付、配送等功能，完美的使餐饮行业更高效便捷！功能演示：1、桌号管理登录后台，左侧菜单 “桌号管理”，添加并管理你的桌号信息，添加以后在列表你将可以看到 ID 和 密钥，这两个数据用来生成桌子的二维码2、生成桌子二维码例如上面的ID为 308，密钥为 d3PiIY，那么现在去左侧菜单微信设置
- 确认 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 能够越来越完善，成为更加稳定、易用的开发工具。
