Comment résoudre le problème selon lequel la méta de configuration Uniapp ne prend pas effet

Uniapp est un framework de développement d'applications multiplateforme basé sur Vue.js. Son développement est simple et facile à utiliser. Il peut créer rapidement des pages iOS, Android et H5 et est devenu aujourd'hui l'un des outils importants pour le développement d'applications mobiles. Cependant, le développement d'applications multiplateformes pose également certains problèmes.Par exemple, cet article résout le problème selon lequel la méta de configuration de la page uniapp ne prend pas effet.J'espère qu'il sera utile aux lecteurs.

Description du problème

Récemment, certains développeurs ont signalé que dans les pages H5 créées à l'aide d'uniapp, la balise méta configurée ne prend pas effet, c'est-à-dire que lors de la visualisation du code source du site Web dans le navigateur, la balise méta correspondante est introuvable. Cependant, il peut être affiché normalement dans l'aperçu de l'outil de développement et dans la page de visualisation du téléphone mobile.

Problème résolu

1. Confirmez si le contenu méta est correct

Tout d'abord, vous devez vous assurer que le contenu de la balise méta est correct, configurez-le dans le page.json d'uniapp :

"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"
}

Parmi eux, viewport , les mots-clés et la description sont des balises méta nécessaires. D'autres balises méta peuvent être ajoutées pour une configuration personnalisée.

2. Ajouter une balise méta dans index.html

Si la balise correspondante n'existe pas dans le code source de la page après avoir configuré la méta dans page.json, vous devez ajouter manuellement la balise méta dans index.html du projet uniapp. Par exemple, ajoutez la balise méta de viewport dans la balise head :

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

Si vous devez ajouter d'autres balises méta, vous pouvez vous référer à la configuration à l'étape 1.

3. Confirmer la configuration de l'emballage Uniapp

Si le problème ne peut pas être résolu dans les deux premières étapes, vous devez confirmer la configuration de l'emballage Uniapp, qui comprend principalement les deux aspects suivants :

• Si l'emballage est configuré dans le manifeste d'Uniapp. json Le chemin

manifest.json est le fichier de configuration construit par uniapp, dans lequel le chemin d'empaquetage doit être défini. Plus précisément, vous devez ajouter le chemin de la page à empaqueter dans l'attribut weex > appboard > ou h5 >

// 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"
        }
      }
    ]
  }
}

• Avez-vous configuré le chemin d'empaquetage dans vue.config.js d'uniapp

En plus de configurer le chemin d'empaquetage dans manifest.json, vous pouvez également le configurer dans le fichier vue.config.js dans le répertoire racine du projet uniapp La configuration est principalement définie dans les attributs outputDir et 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']
    }
  }
}

Ceci ci-dessus est un exemple de code Pour plus de détails, veuillez vous référer à la documentation officielle ou au débogage pendant le processus de développement.

Conclusion

Après avoir configuré la balise méta dans uniapp, si la balise correspondante n'existe pas dans le code source de la page, vous devez l'ajouter manuellement dans index.html si elle ne prend toujours pas effet après l'empaquetage, vous devez le faire ; confirmer manifest.json et vue.config La configuration dans .js est-elle correcte ? J'espère que cet article a résolu votre problème, et j'espère également qu'uniapp pourra devenir de plus en plus parfait et devenir un outil de développement plus stable et plus facile à utiliser.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!