解决 uniapp 修改index.html文件不生效的问题

谢泽豪2025-08-22 10:06

业务场景：需要在H5网站设置追踪用户行为（即埋点）的script代码。

问题：无论如何修改根目录下的index.html文件都不会生效

问题原因：在 manifest.json 文件中有个【web配置】--->【index.html模版路径】，默认为空的，所以任你怎么改都不会生效。

解决方法：

1、在根目录下创建一个 public 目录，在创建一个 index.html 文件。

2、设置【index.html默认路径】

3、在index.html填充以下代码：

html 复制代码

<!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" />

        <!-- 埋点代码或者公共的代码 Start -->

        <!-- 埋点代码或者公共的代码 End-->
	</head>
	<body>
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		<div id="app"></div>
		<!-- built files will be auto injected -->
	</body>
</html>

参考文档：manifest.json 应用配置（重点）、uniapp 配置index.html 模板