在使用重写规则的框架中，如何最好地整合 CSS 和 JS？

Posted 2023-02-22

【中文标题】在使用重写规则的框架中，如何最好地整合 CSS 和 JS？

【英文标题】：In a framework using rewrite rules, how best to integrate CSS and JS?

【发布时间】：2011-08-14 11:09:03

【问题描述】：

我有一个框架，它通过一个基本文件路由所有传入的 URI，为了处理静态文件，我有一个子目录 /static，我在其中放置了所有 CSS、JS 和图像（即 /static /css/main.css) 以保持清晰。

我自己的代码和插件可以很好地处理这个问题，但有时需要实现其他代码，并且 CSS 文件通常会尝试通过调用这些文件中的 URI 来设置样式。我怎样才能以最好的方式处理这个问题？

一个例子；

/关于/公司 路线 /script?q=关于/公司 并锁定站点的主要结构。然而; /static/css/main.css 使用来自的背景图像； /static/images/widget/bg-color.png

由于这是一个框架，我不乐意在 CSS 文件中硬编码 /static 路径。一方面，我不想将网站限制为仅从某个根目录提供服务。 :) 对于所有 JS，都有处理这个的对象（即 var x = $xs_dir.js + '/script.js' ;）但 CSS 不存在任何东西。我想我有五个选择；

（最差）在我的管理工具中有一个选项，可以扫描所有 CSS 文件以查找 URI 引用，并在它们前面加上正确的静态目录，并将所有 CSS 像它们是静态的一样写入根目录。

（差）依靠网络服务器将任何静态目录别名为一个根静态目录的能力，并让管理员处理它。

（嗯，慢）通过框架提供 CSS 文件，使用正确的静态路径过滤 URI。

（最简单，但不是很容易）为我的 CSS 文件的静态部分手动编码，以适应可能存在的任何服务器设置，并确保它们易于查找和更改。

（可能是最好的，但复杂？）有一个重写规则，检测当前目录中的图像，将它们转发到静态目录，并使用一些可识别的动态路径编写所有 CSS。 （即，代替 /static/images/img.png 执行 images/img.png 并依靠重写规则将其推送到需要去的地方，同时限制网站结构永远不会有一个名为“images”的子目录）

还有其他选择吗？想法？我知道 Joomla 和类似的有一些文件重写，可能没有。 5？

【参考方案1】：

向管理员要求这种方法可能有点乐观，特别是如果他们不控制服务器环境，但是：

您可以通过使用单独的（子）域来提供静态文件来做到这一点。然后，您可以在 Web 服务器中创建一个单独的虚拟主机来提供这些文件。这种方法还具有优势，您可以通过使用无 cookie 的域和积极的缓存选项来优化速度。此外，它还允许浏览器针对子域启动额外的线程，以与页面的其余部分并行下载这些文件。

例如Google 已经托管了许多您可以直接使用的开源框架，例如 Jquery UI 和 corresponding css。

管理员的另一个选择是使用反向代理，如 varnish，来服务和缓存任何现有文件，然后将所有其他 get uri 传递给包含框架控制器的后端服务器（然后是框架文件，除了 ' router'，为了安全起见，应该在公共文件夹之外）。

我想至少可以选择从无 cookie 的域中提供静态文件会很方便，否则 Duffmans 的答案就足够了。

【参考方案2】：

选项 5 适用于 Apache。如果您的 css 文件中的所有图像引用都以相对子目录开头，没有前面的斜杠（例如 url(images/image.png)），那么在 <css_dir> 中，您可以将 images/ 重写为 <where_the_images_are>。您的 .htaccess 保留在其中，并且仅适用于 <css_dir> 以及 css 文件，并且可以在您放置它的任何位置工作。

RewriteRule 只需要知道 images/ 相对于它自己才是最重要的。

【参考方案3】：

如果所有 CSS 文件都以 /static/css/ 结尾，并且 CSS 引用的所有图像都以 /static/images/ 结尾，那么只需确保每当您从 CSS 中引用图像时都使用相对路径 ../images/widget/bg-color.png它应该可以正常工作。

【讨论】：

理论上你是对的 :)，但通常你只想导入一些插件或模块，它们把东西放在不同的地方。我最初的狡辩是我使用 Jquery UI，它使用 CSS 文件并引用“images/...”。

【参考方案4】：

假设您将所有内容路由到“script.php”，这会将所有不存在的文件路由到 script.php，从而允许直接提供静态内容，同时也路由到您的控制器。

RewriteEngine On

RewriteCond %REQUEST_FILENAME !-d
RewriteCond %REQUEST_FILENAME !-f
RewriteRule ^(.*)$ script.php [QSA,L]

【参考方案5】：

您可以使用 html 基本标记 http://www.w3schools.com/tags/tag_base.asp 设置 HTML 中所有相对 url 的路径。但是，这也可能会破坏您的所有相关链接。

【讨论】：

不确定这如何解决它的框架部分以及如何处理客户端和服务器之间的路径结构？您的意思是将基本标签与我上面列出的选项之一结合使用吗？

【参考方案6】：

不确定您是否有 .htaccess 文件，但一种选择是在“图像”文件夹下为请求添加重写规则，以将请求重定向到您的静态（或其他）文件夹：

RewriteRule ^[^\?]*(images/)(.*)$ /static/$1$2 [NC,L]

这样您就可以在 CSS 中将所有图像仅引用为 /images/whatever.png。

如果您需要为不同的服务器进行不同的设置，您可以始终为每个环境或服务器创建一个单独的 .htaccess 文件，并对它们进行版本控制。

【讨论】：

是的，我认为这是上面的选项 2。我不情愿的唯一原因当然是管理方面，因为实施该框架的极客通常没有完全访问网络服务器的权限，但是是的，到目前为止最好。 :)