测试网站本地时无法加载资产 [英] Unable to load assets when testing website localy

问题描述

我已经在我的服务器上测试了网站，其中一切正常，它是一个简单的基于html / css / js的网站，没有任何后端功能，通常我可以通过简单的浏览器打开网页来测试这些没有任何问题，但是我遇到这个时候它只加载html的问题，似乎没有资源加载像js文件或css文件，我在控制台中得到的错误类似于（在chrome中）：

 无法加载资源：net :: ERR_FILE_NOT_FOUND 
  

编辑：我可以通过删除文件路径前面的'/'来修复它，但是在ie问题仍然存在的测试中，是否有一些工作？ p>

解决方案

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

您不能将其作为文件打开： c：\website\index.html

，而不是你可以安装堆栈，如WAMP，XAMPP或EasyPHP。我建议 XAMPP

安装后，您只需输入浏览器地址栏：

  localhost 
  

您将从 c：\xampp中看到 index.html 的呈现内容\htdocs 文件夹。该文件夹（c：\xampp\htdocs）成为您的网站，它的工作方式与网站完全相同。资源将正确加载。

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

如果您在其中创建一个文件夹，如dev，并在其中放入一个名为 mytest.html 的文件，那么在浏览器地址栏中，您可以输入：

  localhost / dev / mytest.html 
  

另一个很好的技巧是通过编辑Windows 主机文件来给自己一个域名。例如，您可以通过编辑此文件在本地使用 ilya.com 域：

  c：\windows\system32\drivers\etc\hosts 
  

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

然后，在该文件的底部，在自己的一行，输入：

  127.0.0.1 ilya.com 
  

保存该文件后，输入浏览器地址栏时：

  http://ilya.com 
  

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

  http://ilya.com/dev 
  / pre> 
 
 
您将从获取index.html文件c：\xampp\htdocs\dev 文件夹。
 
 
 
不要忘记关于该文件是非常重要的！它将永远阻止您访问在线 http://ilya.com 网站。当然，禁用它就像注释掉该行一样简单（通过在前面放置一个＃）或者通过弄乱重定向，这是我通常做的： p> 
 
 
  127.0.0.1 xilya.com 
  
（删除前导x比重新键入整行更容易）。最酷的事情：变化立即发生，无需重新启动 - 甚至弹跳浏览器。
 
 
 
资源：
 
 
 
  Windows：XAMPP vs WampServer vs EasyPHP vs替代 
 
 
 
 
 
 
我应该提到的另外一个考虑因素 - 它现在可能不适用于你，但也许在未来一天 - 尝试将您的在线主机帐户的PHP版本与本地安装的XAMPP（或WAMP / MAMP / LAMP / EasyPHP）版本相匹配。
 
 
 
例如，在撰写本文时，我的托管帐户提供PHP版本5.3.29  - 但是当前版本的XAMPP是PHP 5.5.19或5.6.3。 Waaaaay先进。最后我要做的是编程我的网站，上传它并且必须调试版本。
 
 
 
旧版本可以从更多下载下载链接，重定向到这里：
  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 文件夹中）。
 
I have tested website on my server where everything works fine, its a simple html/css/js based website without any backend functionality, usually I am able to test these without any problems by simply opening pages in browser, however I encountered an issue where this time it only loads up html and it seems that no resources are loaded like js files or css files, the error I get in console is similar to this (in chrome):
Failed to load resource: net::ERR_FILE_NOT_FOUND
Edit: I was able to fix it in chrome by removing '/' in front of file paths, however when testing in ie issue is still present, is there a work around for this?
解决方案
The problems you are having may be related to how you are opening your web pages in the browser.

You cannot just open them as files: c:\website\index.html

Instead, you should install a stack such as WAMP, or XAMPP, or EasyPHP. I recommend XAMPP

After installation, you just type in the browser address bar:
localhost
And you will see the rendered contents of index.html from the c:\xampp\htdocs folder.  That folder (c:\xampp\htdocs) becomes your website, and it works exactly like a website. Resources will load correctly.

After installation, just clear out that folder, and copy all your web site .html and .php etc files into that folder. Use the same folder structure you have on your website. A CPANEL website's public_html folder is the c:\xampp\htdocs folder on your C: drive.

If you create a folder in there, such as dev, and put a file inside it called mytest.html, then in the browser address bar you can type:
localhost/dev/mytest.html
Another great trick is to give yourself a domain by editing the Windows hosts file. For example, you can use the ilya.com domain locally by editing this file:
c:\windows\system32\drivers\etc\hosts
Note that the file does not have an extension.

Then, inside that file, at the very very bottom, on a line of its own, type:
127.0.0.1     ilya.com
After saving that file, when you type in the browser address bar:
http://ilya.com
You will get the index.html file from your c:\xampp\htdocs folder. And if you type:
http://ilya.com/dev
You will get the index.html file from your c:\xampp\htdocs\dev folder.

It is very important to NOT FORGET about that file! It will forever prevent you from accessing the online http://ilya.com website. Of course, disabling it is as simple as commenting out that line (by putting a # in front) or by messing up the redirect, which is what I usually do:
127.0.0.1     xilya.com
(Deleting the leading x is easier than retyping the entire line). Coolest thing: the changes take place instantly, without rebooting -- or even bouncing the browser.

Resources:

Windows: XAMPP vs WampServer vs EasyPHP vs alternative



One other consideration that I should mention -- and it may not apply to you right now, but perhaps one day in the future -- is to try to match your online hosting account's version of PHP to the version of XAMPP (or WAMP/MAMP/LAMP/EasyPHP) that you install locally.

For example, as of this writing my hosting account serves PHP ver 5.3.29 -- but the current version of XAMPP is on PHP 5.5.19 or 5.6.3. Waaaaay to advanced. The last thing I want to do is program my site, upload it and have to debug the versionitis.

Older versions can be downloaded from the More Downloads link, which redirects to here:
http://sourceforge.net/projects/xampp/files/XAMPP%20Windows/
To know what version of PHP your hosting account serves, just create a file on your site, such as: public_html/somefile.php.  The contents just need to be these two lines:
<?php
phpinfo();
When you browse to that file: http://mydomain/somefile.php you will see a page full of PHP config info, with the PHP version prominently displayed at top, in bold. Of course, you can do the same on localhost (that is, in the c:\xampp\htdocs folder).

                        
这篇关于测试网站本地时无法加载资产的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！