遇到Uniapp配置meta失效？教你一招轻松解决！
已收录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"
}
其中，viewport、keywords、description是一个必要的meta标签，可以添加其它meta标签进行个性化配置。
2、index.在html中添加meta标签
假如在page上.json配置meta后，页面源代码中没有相应的标签，需要在uniapp项目的index中使用。.手动添加html中的meta标签。例如，在head标签中添加viewportmeta标签：
若需添加其它meta标签，请参考步骤1中的配置。
3、确认uniapp打包配置
若前两个步骤都没有解决问题，则需要确认uniapp包装的配置，主要包括以下两个方面：
manifest是否在uniapp上？.在json中配置了包装路径
manifest.json是uniapp构建的配置文件，需要在其中设置包装路径。具体来说，它需要在manifest中。.weeex>json中的jsonappboard>或h5>src属性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"
}
}
]
}
}
vuee是否在uniapp上？.config.在JS中配置了包装路径
除了manifest之外.在json中配置包装路径，也可在uniapp项目的根目录中配置vuee。.config.在outputDir和pages属性中设置js文件进行配置：
module.exports={
outputDir:'dist/h5',
pages:{
index:{
entry:'src/main.js',
template:'public/index.html',
filename:'index.html',
title:'IndexPage',
chunks:['chunk-vendors','chunk-common','index']
}
}
}
以上为部分示例代码，具体请参考官方文件或在开发过程中进行调试。
结论
在uniapp中配置meta标签后，如果页面源代码中没有相应的标签，则需要在index手动配置.添加到html中；如果包装后仍然无效，则需要确认manifest.json和vue.config.JS中的配置是否正确。我希望这篇文章能解决你的问题，也希望uniapp能够越来越完善，成为一个更稳定、更易于使用的开发工具。
