How to solve the problem that uniapp configuration meta does not take effect

Uniapp is a cross-platform application development framework based on Vue.js. It is simple to develop and easy to use. It can quickly build iOS, Android and H5 pages and has become one of the important tools for mobile application development today. However, the development of cross-platform applications also brings some problems. For example, this article solves the problem that the uniapp page configuration meta does not take effect. I hope it will be helpful to readers.

Problem Description

Recently, some developers have reported that in the H5 page built using uniapp, the configured meta tag does not take effect. That is, when viewing the website source code in the browser, the corresponding meta cannot be found. Label. However, it can be displayed normally in the preview of the development tool and the viewing page on the mobile phone.

Problem Solving

1. Confirm whether the meta content is correct

First you need to ensure that the content of the meta tag is correct, configure it in the page.json of 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"
}

Among them, viewport, keywords, and description are necessary meta tags, and other meta tags can be added for personalized configuration.

2. Add meta tag in index.html

If the corresponding tag does not exist in the page source code after configuring meta in page.json, you need to add it in the uniapp project Manually add the meta tag to index.html. For example, add the meta tag of viewport in the head tag:

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

If you need to add other meta tags, please refer to the configuration in step 1.

3. Confirm uniapp packaging configuration

If the problem cannot be solved in the first two steps, you need to confirm the uniapp packaging configuration, which mainly includes the following two aspects:

• Whether the packaging path is configured in uniapp's manifest.json

manifest.json is the configuration file built by uniapp, in which the packaging path needs to be set. Specifically, you need to add the page path to be packaged in the weex > appboard > src attribute or h5 > router > pages attribute in manifest.json.

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

• Whether the packaging path is configured in vue.config.js of uniapp

In addition to configuring the packaging path in manifest.json, you can also configure it in the uniapp project's Configure in the vue.config.js file in the root directory, mainly in the outputDir and pages attributes:

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

The above is part of the sample code. For details, please refer to the official documentation or debug during the development process. .

Conclusion

After configuring the meta tag in uniapp, if the corresponding tag does not exist in the page source code, you need to manually add it in index.html; if it still does not take effect after packaging, you need to Confirm whether the configurations in manifest.json and vue.config.js are correct. I hope this article has solved your problem, and I also hope that uniapp can become more and more perfect and become a more stable and easy-to-use development tool.

The above is the detailed content of How to solve the problem that uniapp configuration meta does not take effect. For more information, please follow other related articles on the PHP Chinese website!