1. Create a new html page in the root directory of the project, which is used to customize the template. Here is the template, and the file name is defined by yourself
2. Copy the content of the basic template below to this html file, and then customize the configuration of meta, link and import js on this basis (it is added on this basis, do not modify or delete the original code, otherwise the custom template will not take effect)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<!-- Open Graph data -->
<!-- <meta property="og:title" content="Title Here" /> -->
<!-- <meta property="og:url" content="http://www.example.com/" /> -->
<!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
<!-- <meta property="og:description" content="Description Here" /> -->
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
3. manifest.json->web配置->template Associate the path of the html file in the node.
4. Define custom meta and link in the newly created template file
- Define application name <meta name="apple-mobile-web-app-title" content="Fusion evaluation">
- Define the app icon <link rel="apple-touch-icon" href="/static/favicon.png">
5. Note: The href path of the link tag corresponds to the static folder of the project root directory, and the file should also be located in the /static/ folder on the server. If it is only in the local project but not on the server, the icon will only take effect in the local development environment, and the officially released online environment will not take effect!