So lösen Sie das Problem, dass das Uniapp-Konfigurationsmeta nicht wirksam wird

Uniapp ist ein plattformübergreifendes Anwendungsentwicklungs-Framework, das auf Vue.js basiert. Seine Entwicklung ist einfach und benutzerfreundlich. Es kann schnell iOS-, Android- und H5-Seiten erstellen und ist heute zu einem der wichtigsten Tools für die Entwicklung mobiler Anwendungen geworden. Die Entwicklung plattformübergreifender Anwendungen bringt jedoch auch einige Probleme mit sich. Beispielsweise löst dieser Artikel das Problem, dass das Uniapp-Seitenkonfigurations-Meta nicht wirksam wird.

Problembeschreibung

Kürzlich haben einige Entwickler berichtet, dass auf H5-Seiten, die mit uniapp erstellt wurden, das konfigurierte Meta-Tag nicht wirksam wird. Das heißt, wenn der Website-Quellcode im Browser angezeigt wird, kann das entsprechende Meta-Tag nicht gefunden werden. In der Vorschau des Entwicklungstools und der Anzeigeseite auf dem Mobiltelefon kann es jedoch normal angezeigt werden.

Problem gelöst

1. Bestätigen Sie, ob der Meta-Inhalt korrekt ist

Zunächst müssen Sie sicherstellen, dass der Inhalt des Meta-Tags korrekt ist, und ihn in der page.json von uniapp konfigurieren:

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

Unter anderem Ansichtsfenster , Schlüsselwörter und Beschreibung sind notwendige Meta-Tags. Weitere Meta-Tags können zur personalisierten Konfiguration hinzugefügt werden.

2. Meta-Tag in index.html hinzufügen

Wenn das entsprechende Tag nach der Konfiguration von Meta in page.json nicht im Quellcode der Seite vorhanden ist, müssen Sie das Meta-Tag manuell in index.html des Uniapp-Projekts hinzufügen. Fügen Sie beispielsweise das Meta-Tag von viewport im Head-Tag hinzu:

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

Wenn Sie weitere Meta-Tags hinzufügen müssen, können Sie sich auf die Konfiguration in Schritt 1 beziehen.

3. Uniapp-Verpackungskonfiguration bestätigen

Wenn das Problem in den ersten beiden Schritten nicht gelöst werden kann, müssen Sie die Uniapp-Verpackungskonfiguration bestätigen, die hauptsächlich die folgenden zwei Aspekte umfasst:

• Ob die Verpackung im Uniapp-Manifest konfiguriert ist. json Der Pfad

manifest.json ist die von uniapp erstellte Konfigurationsdatei, in der der Verpackungspfad festgelegt werden muss. Insbesondere müssen Sie den zu packenden Seitenpfad im Attribut weex >

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

• Haben Sie den Verpackungspfad in vue.config.js von uniapp konfiguriert?

Zusätzlich zur Konfiguration des Verpackungspfads in manifest.json können Sie ihn auch in der Datei vue.config.js im Stammverzeichnis konfigurieren Die Konfiguration des Uniapp-Projekts wird hauptsächlich in den Attributen „outputDir“ und „pages“ festgelegt:

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']
    }
  }
}

Das Obige ist ein Beispielcode. Weitere Informationen finden Sie in der offiziellen Dokumentation oder beim Debuggen während des Entwicklungsprozesses.

Fazit

Wenn nach der Konfiguration des Meta-Tags in uniapp das entsprechende Tag nicht im Quellcode der Seite vorhanden ist, müssen Sie es manuell in index.html hinzufügen. Wenn es nach dem Packen immer noch nicht wirksam wird, müssen Sie es tun Bestätigen Sie manifest.json und vue.config. Ist die Konfiguration in .js korrekt? Ich hoffe, dass dieser Artikel Ihr Problem gelöst hat, und ich hoffe auch, dass Uniapp immer perfekter und zu einem stabileren und benutzerfreundlicheren Entwicklungstool wird.

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass das Uniapp-Konfigurationsmeta nicht wirksam wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!