静态HTML页面JS和CSS加载失败问题及解决方案

不幸的是，这个 HTML 页面的 JS 和 CSS 无法加载。
其实很多初学者都遇到过这个问题，主要是文件路径引用不正确。
我以前也遇到过这种情况，后来查了一下，确实不错。

先说绝对路径问题。
这个东西是从根目录“/”开始的。
就像当你访问一个网站的首页，其中包含一个JS文件时，输入 [xss_clean][xss_clean] ，浏览器就会从根目录请求该文件。
问题是，如果你不通过网页上的链接访问，而是直接在浏览器的地址栏中输入文件路径，例如file:///home/user/project/index.，浏览器会根据你输入的路径来请求文件，而不是从网站的根目录开始。
结果就是浏览器请求的路径与设置的绝对路径不匹配，加载自然失败。

我们来谈谈相对路径问题。
这基于 HTML 文件的当前位置。
例如，如果您的 HTML 文件位于 project/index.html 中。
并且你的JS文件位于project/components/card.js，你可以简单地编写 [xss_clean][xss_clean] 来加载它。
但是如果你的HTML文件后来被移动到project/example/page.，那么你需要编写[xss_clean][xss_clean]。
如果路线等级错误，您将无法找到方向。

解决这两个问题，一是使用Web服务器，二是正确配置相对路径。

首先我们来谈谈如何使用网络服务器。
我推荐它。
因为它可以模拟真实的web环境，方便调试。
例如，如果您使用 Node.js http 服务器，则安装 http 服务器后，在项目根目录中运行它，然后导航到 http://localhost:8 08 0。
这样就不需要直接通过文件路径打开 HTML 文件，而是通过 Web 服务器地址打开。
这样浏览器请求的资源路径就是正确的。

对于相对路径来说，这种适用场景比较简单，就是直接通过file://协议打开HTML文件，或者项目结构简单，资源级别固定。
然后操作就简单了。
同级目录写文件名，子目录写子目录名，父目录写../。

简而言之，路由问题实际上是一个资源放置逻辑冲突问题。
一旦理解了绝对路径和相对路径的区别，问题就迎刃而解了。
尽管这看起来微不足道，但许多初学者都会陷入这个陷阱。

关于Oppo、Vivo手机低于Android 7.0版本WebView中JS不执行，CSS加载异常的问题

Android7 .0以下的手机OV，Https baseUrl、loadDataWithBaseURL baseUrl()失败。

WebView loadDataWithBaseURL(null, ) 可以解决，但是图片路径问题需要解决。

在具体项目上测试，Android6 .0+、Https、WebView loadDataWithBaseURL(null...) 有效。

图像路径由相对路径补充。
你自己掂量一下。

为什么Ember.js的CSS代码不生效？调试框架样式的完整教程

直接说吧
1 .样式文件未正确导入。
检查app.scss或app.css中是否使用了@import。
2 . 以优先级较低的选择器为目标。
请具体说明，例如使用 id > .class > element。
3 .缓存问题。
硬刷新浏览器或删除 tmp 和 dist 目录并重新启动 ember 服务器。
4 . 构建配置不正确。
对于生产环境，使用 ember build --environment=development 来查看 dist 目录中是否生成了 CSS。
5 .CSS模块化没有用。
使用 ember-css-modules 并在模板中使用 {{styles.container}} 。
6 .第三方库未正确安装。
使用 app.import() 将其导入 ember-cli-build.js 并检查路径。

检查浏览器开发人员工具中的“计算”选项卡，了解如何应用样式。