在本地测试网站时无法加载资产

Unable to load assets when testing website localy

我已经在我的服务器上测试了网站,一切正常,它是一个简单的基于 html/css/js 的网站,没有任何后端功能,通常我只需在浏览器中打开页面就可以毫无问题地测试这些网站,但是我遇到了一个问题,这次它只加载了 html 并且似乎没有像 js 文件或 css 文件那样加载资源,我在控制台中得到的错误与此类似(在 chrome):

Failed to load resource: net::ERR_FILE_NOT_FOUND

编辑: 我能够在 chrome 中通过删除文件路径前面的 '/' 来修复它,但是在 ie 中测试时问题仍然存在,有解决办法吗?

您遇到的问题可能与您在浏览器中打开网页的方式有关。

您不能只将它们作为文件打开:c:\website\index.html

相反,您应该安装诸如 WAMP 或 XAMPP 或 EasyPHP 之类的堆栈。我推荐XAMPP

安装完成后,您只需在浏览器地址栏中输入:

localhost

并且您会在 c:\xampp\htdocs 文件夹中看到 index.html 的渲染内容。该文件夹 (c:\xampp\htdocs) 成为您的网站,它的工作方式与网站完全一样。资源将正确加载。

安装后,只需清除该文件夹,并将您所有的网站 .html 和 .php 等文件复制到该文件夹​​中。使用与您网站上相同的文件夹结构。 CPANEL 网站的 public_html 文件夹是您 C: 驱动器上的 c:\xampp\htdocs 文件夹。

如果你在那里创建一个文件夹,比如dev,并在里面放一个名为mytest.html的文件,然后在浏览器地址栏中你可以输入:

localhost/dev/mytest.html

另一个绝妙的技巧是通过编辑 Windows hosts 文件给自己一个域名。例如,您可以通过编辑此文件在本地使用 ilya.com 域:

c:\windows\system32\drivers\etc\hosts

请注意,该文件没有扩展名。

然后,在该文件中,在最底部的一行中,键入:

127.0.0.1     ilya.com

保存该文件后,当您在浏览器地址栏中键入时:

http://ilya.com

您将从 c:\xampp\htdocs 文件夹中获取 index.html 文件。如果你输入:

http://ilya.com/dev

您将从 c:\xampp\htdocs\dev 文件夹中获取 index.html 文件。

不要忘记那个文件是非常重要的!它将永远阻止您访问在线 http://ilya.com 网站。当然,禁用它就像注释掉该行一样简单(通过在前面放置 # )或搞乱重定向,这是我通常做的:

127.0.0.1     xilya.com

(删除前导 x 比重新键入整行更容易)。最酷的事情:更改立即发生,无需重新启动 - 甚至不会弹出浏览器。

资源:

Windows: XAMPP vs WampServer vs EasyPHP vs alternative


我应该提到的另一个注意事项——它现在可能不适用于你,但也许在未来的某一天——是尝试将你的在线托管帐户的 PHP 版本与您在本地安装的 XAMPP(或 WAMP/MAMP/LAMP/EasyPHP)的版本。

例如,在撰写本文时,我的托管帐户服务于 PHP 版本 5.3.29 -- 但 XAMPP 的当前版本是 PHP 5.5.19 或 5.6。 3. Waaaaay 先进。我最不想做的就是对我的网站进行编程、上传并调试版本问题。

旧版本可以从 More Downloads link 下载,重定向到这里:

http://sourceforge.net/projects/xampp/files/XAMPP%20Windows/

要了解您的主机帐户所服务的 PHP 版本,只需在您的网站上创建一个文件,例如:public_html/somefile.php。内容只需这两行:

<?php
phpinfo();

当您浏览到该文件时:http://mydomain/somefile.php 您将看到一个充满 PHP 配置信息的页面,PHP 版本以粗体突出显示在顶部。当然,你也可以在localhost上做同样的事情(也就是在c:\xampp\htdocs文件夹中)。