注册登录

3***@qq.com

发布：2022-10-28 09:31
更新：2023-04-10 21:52
阅读：201

【报Bug】指定index.html模板后,样式错乱

分类：uni-app

bug反馈

产品分类： uniapp/H5

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win11

HBuilderX类型：正式

HBuilderX版本号： 3.6.4

浏览器平台： Chrome

浏览器版本： 103.0.5060.114

项目创建方式： HBuilderX

示例代码：

index.html 代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta />
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
<title></title>
<script type="text/javascript" src="<%= BASE_URL %>static/d2c/js/d2c.min.1.4.1.js"></script>
<link rel="stylesheet" href="<%= BASE_URL %>static/d2c/css/d2c.1.4.1.css" />
<script type="text/javascript" src="<%= BASE_URL %>static/d2c/js/d2c.cluster-0.11.min.js"></script>
<script type="text/javascript" src="<%= BASE_URL %>static/d2c/js/draw.js"></script>
<script type="text/javascript" src="<%= BASE_URL %>static/d2c/js/turf.min.js"></script>


</head>
<body>
<div id="app">

</div>
<script type="module" src="/main.js"></script>
</body>
</html>

操作步骤：

UI框架是使用uni-ui. 其他就配置index,html模板,需要导入本地资源的js.

预期结果：

如图所示.

实际结果：

样式发生错乱,写的css无效

bug描述：

自定义模板前,和自定义模板后, 样式错乱, 结果如图

2022-10-28 09:31 负责人:无分享

2 个回复

index.html是默认的模板路径，使用自定义模板时，建议新建html进行自定义，可参考 hello uni-app示例中template.h5.html文件

3***@qq.com (作者)

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











<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>



</body>

</html>

我复制了这个页面,在里面多引入几个3个js文件一个css文件,结果还是一样

2022-10-28 10:41
DCloud_UNI_WZF

回复 3***@qq.com: 检查css是否引起冲突，如确认框架问题，请提供测试工程

2022-10-28 11:05

3***@qq.com (作者)

另外遇到一个问题,就是编译成H5,使用hash模式, 路径是/mobile/, 部署到线上,本地js资源加载失败.

附件分别是静态资源路径,

DCloud_UNI_WZF

检查下 publicPath 配置是否正确

2023-04-11 09:41

要回复问题请先登录或注册