uniapp 구성 메타가 적용되지 않는 문제를 해결하는 방법

Uniapp은 Vue.js를 기반으로 하는 크로스 플랫폼 애플리케이션 개발 프레임워크로, 개발이 간단하고 사용하기 쉬우며 iOS, Android 및 H5 페이지를 빠르게 구축할 수 있으며 오늘날 모바일 애플리케이션 개발에 중요한 도구 중 하나가 되었습니다. 그러나 크로스 플랫폼 애플리케이션의 개발은 또한 몇 가지 문제를 가져옵니다. 예를 들어 이 기사는 uniapp 페이지 구성 메타가 적용되지 않는 문제를 해결하는 것이 독자들에게 도움이 되기를 바랍니다.

문제 설명

최근 일부 개발자가 uniapp을 사용하여 빌드한 H5 페이지에서 구성된 메타 태그가 적용되지 않는다고 보고했습니다. 즉, 브라우저에서 웹사이트 소스 코드를 볼 때 해당 메타 태그를 찾을 수 없습니다. 단, 개발도구 미리보기 및 휴대폰 보기 페이지에서는 정상적으로 표시될 수 있습니다.

문제 해결

1. 메타 내용이 맞는지 확인

먼저 메타 태그의 내용이 맞는지 확인하고 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 , 키워드, 설명은 필수 메타 태그입니다. 기타 메타 태그를 추가하여 개인화할 수 있습니다.

2. index.html에 메타 태그 추가

page.json에서 메타를 구성한 후 페이지 소스 코드에 해당 태그가 없으면 유니앱 프로젝트의 index.html에 메타 태그를 수동으로 추가해야 합니다. 예를 들어 head 태그에 viewport의 메타 태그를 추가합니다.

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

다른 메타 태그를 추가해야 하는 경우 1단계의 구성을 참조할 수 있습니다.

3. uniapp 패키징 구성 확인

처음 두 단계에서 문제가 해결되지 않으면 주로 다음 두 가지 측면을 포함하는 uniapp 패키징 구성을 확인해야 합니다.

• 패키징이 uniapp 매니페스트에 구성되어 있는지 여부. json

manifest.json 경로는 uniapp에서 빌드한 구성 파일로, 패키징 경로를 설정해야 합니다. 특히, 매니페스트.json의 weex > appboard > 속성 또는 h5 > router >

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

• uniapp의 vue.config.js에서 패키징 경로를 구성하셨나요

manifest.json에서 패키징 경로를 구성하는 것 외에도 루트 디렉터리의 vue.config.js 파일에서도 구성할 수 있습니다. uniapp 프로젝트의 구성은 주로 outputDir 및 페이지 속성에서 설정됩니다.

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

위는 일부 샘플 코드입니다. 자세한 내용은 공식 문서를 참조하거나 개발 과정에서 디버그하세요.

결론

uniapp에서 메타 태그를 구성한 후 페이지 소스 코드에 해당 태그가 없으면 index.html에 수동으로 추가해야 하며, 패키징 후에도 적용되지 않으면 수동으로 추가해야 합니다. 매니페스트.json 및 vue.config를 확인하세요. .js의 구성이 정확합니까? 이 글을 통해 여러분의 문제가 해결되길 바라며, 유니앱이 점점 더 완벽해지고, 더욱 안정적이고 사용하기 쉬운 개발툴이 되기를 바랍니다.

위 내용은 uniapp 구성 메타가 적용되지 않는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!