Bagaimana untuk menyelesaikan masalah yang meta konfigurasi uniapp tidak berkuat kuasa

Uniapp ialah rangka kerja pembangunan aplikasi merentas platform berdasarkan Vue.js Pembangunannya ringkas dan mudah digunakan. Ia boleh membina halaman iOS, Android dan H5 dengan cepat, dan telah menjadi salah satu alat penting untuk pembangunan aplikasi mudah alih hari ini. Walau bagaimanapun, pembangunan aplikasi merentas platform juga membawa beberapa masalah Sebagai contoh, artikel ini menyelesaikan masalah yang meta konfigurasi halaman uniapp tidak berkuat kuasa.

Perihalan Masalah

Baru-baru ini, beberapa pembangun telah melaporkan bahawa dalam halaman H5 yang dibina menggunakan uniapp, tag meta yang dikonfigurasikan tidak berkuat kuasa, iaitu, apabila melihat kod sumber tapak web dalam penyemak imbas, meta yang sepadan tidak dapat ditemui. Walau bagaimanapun, ia boleh dipaparkan seperti biasa dalam pratonton alat pembangunan dan halaman paparan pada telefon mudah alih.

Penyelesaian Masalah

1. Sahkan sama ada kandungan meta adalah betul

Mula-mula anda perlu memastikan bahawa kandungan tag meta adalah betul, konfigurasikan ia dalam page.json 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"
}

Antaranya, port pandangan, kata kunci dan penerangan adalah teg meta yang diperlukan dan teg meta lain boleh ditambah untuk konfigurasi diperibadikan.

2. Tambah tag meta dalam index.html

Jika teg yang sepadan tidak wujud dalam kod sumber halaman selepas mengkonfigurasi meta dalam page.json, anda perlu menambahkannya dalam projek uniapp Tambah tag meta secara manual pada index.html. Contohnya, tambahkan teg meta port pandang dalam teg kepala:

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

Jika anda perlu menambah teg meta lain, anda boleh merujuk kepada konfigurasi dalam langkah 1.

3. Sahkan konfigurasi pembungkusan uniapp

Jika masalah tidak dapat diselesaikan dalam dua langkah pertama, anda perlu mengesahkan konfigurasi pembungkusan uniapp, yang terutamanya merangkumi dua aspek berikut :

• Sama ada laluan pembungkusan dikonfigurasikan dalam manifest.json uniapp

Manifest.json ialah fail konfigurasi yang dibina oleh uniapp, di mana laluan pembungkusan perlu ditetapkan . Khususnya, anda perlu menambah laluan halaman untuk dibungkus dalam atribut 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"
        }
      }
    ]
  }
}

• Sama ada laluan pembungkusan dikonfigurasikan dalam vue.config.js uniapp

Selain mengkonfigurasi laluan pembungkusan dalam manifest.json, anda juga boleh mengkonfigurasinya dalam projek uniapp Konfigurasikan dalam fail vue.config.js dalam direktori akar, terutamanya dalam atribut outputDir dan 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']
    }
  }
}

Di atas adalah sebahagian daripada kod sampel Untuk butiran, sila rujuk kepada rasmi dokumentasi atau nyahpepijat semasa proses pembangunan.

Kesimpulan

Selepas mengkonfigurasi teg meta dalam uniapp, jika teg yang sepadan tidak wujud dalam kod sumber halaman, anda perlu menambahkannya secara manual dalam index.html jika masih tidak ada berkuat kuasa selepas pembungkusan, anda perlu Sahkan sama ada konfigurasi dalam manifest.json dan vue.config.js adalah betul. Saya harap artikel ini telah menyelesaikan masalah anda, dan saya juga berharap uniapp boleh menjadi lebih dan lebih sempurna dan menjadi alat pembangunan yang lebih stabil dan mudah digunakan.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah yang meta konfigurasi uniapp tidak berkuat kuasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!