Uniapp 是一種基于 Vue.js 的跨平臺(tái)應(yīng)用開(kāi)發(fā)框架，其開(kāi)發(fā)簡(jiǎn)單、易上手，可以快速構(gòu)建出 iOS、Android 和 H5 頁(yè)面，成為現(xiàn)在移動(dòng)應(yīng)用開(kāi)發(fā)的重要工具之一。然而，跨平臺(tái)應(yīng)用的開(kāi)發(fā)也帶來(lái)了一些問(wèn)題，比如本文即是解決 uniapp 頁(yè)面配置 meta 不生效的問(wèn)題，希望對(duì)讀者有所幫助。
問(wèn)題描述
近期有開(kāi)發(fā)者反饋在使用 uniapp 構(gòu)建的 H5 頁(yè)面中，配置 meta 標(biāo)簽沒(méi)有生效，即在瀏覽器中查看網(wǎng)站源代碼，找不到相應(yīng)的 meta 標(biāo)簽。但在開(kāi)發(fā)工具的預(yù)覽中和手機(jī)端查看頁(yè)面均能夠正常顯示。
問(wèn)題解決
1、確認(rèn) meta 內(nèi)容是否正確
首先需要確保 meta 標(biāo)簽的內(nèi)容是否正確，在 uniapp 的 page.json 中配置：
"meta": {
"viewport": "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no",
"keywords": "uniapp, meta, 問(wèn)題, 解決",
"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 標(biāo)簽，可添加其他的 meta 標(biāo)簽進(jìn)行個(gè)性化配置。
2、在 index.html 中添加 meta 標(biāo)簽
如果在 page.json 配置 meta 后在頁(yè)面源代碼中不存在相應(yīng)的標(biāo)簽，需要在 uniapp 項(xiàng)目的 index.html 中將 meta 標(biāo)簽手動(dòng)添加進(jìn)去。例如，在 head 標(biāo)簽中添加 viewport 的 meta 標(biāo)簽：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
如果需要添加其他的 meta 標(biāo)簽，可參考第 1 步中的配置。
3、確認(rèn) uniapp 打包配置
如果在前兩步中均未能解決問(wèn)題，需要確認(rèn) uniapp 打包的配置，主要包括以下兩個(gè)方面：
是否在 uniapp 的 manifest.json 中配置了打包的路徑
manifest.json 是 uniapp 構(gòu)建的配置文件，需要在其中設(shè)置打包的路徑。具體而言，需要在 manifest.json 中的 weex > appboard > src 屬性或 h5 > router > pages 屬性中添加需要打包的頁(yè)面路徑。
// 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": "首頁(yè)"
},
"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 項(xiàng)目的根目錄中的 vue.config.js 文件中進(jìn)行配置，主要是在 outputDir 和 pages 屬性中進(jìn)行設(shè)置：
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']
}
}
}以上為部分示例代碼，具體請(qǐng)查閱官方文檔或在開(kāi)發(fā)過(guò)程中進(jìn)行調(diào)試。
結(jié)論
在 uniapp 中配置 meta 標(biāo)簽后，如果在頁(yè)面源代碼中不存在相應(yīng)的標(biāo)簽，需要手動(dòng)在 index.html 中添加；如果打包后仍未生效，需要確認(rèn) manifest.json 和 vue.config.js 中的配置是否正確。希望本文解決了您的問(wèn)題，也希望 uniapp 能夠越來(lái)越完善，成為更加穩(wěn)定、易用的開(kāi)發(fā)工具。
