如何在本地使用XAMPP设置F3？

I am trying to run a Fat Free PHP project locally with XAMPP from C:\xampp\htdocs\abc My problem is none of my css, images, or links work. I added an .htaccess file:

RewriteEngine On
RewriteBase /abc/
RewriteCond %{REQUEST_FILENAME} !-l
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .* /abc/index.php [L,QSA]

It seems to have helped somewhat in that my index.php loads but none of the css nor images load. Also, when I click any links I get 404s, and the url does not route to my /abc directory.

I have tried countless RewriteRules and RewriteConds with no luck.

Also, everything works fine in production so I would like to not change the structure.

Any help on the would be greatly appreciated, thanks.

Try with this .htaccess:

RewriteEngine On
RewriteBase /abc/

# skip all files and directories from rewrite rules below
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

RewriteRule (.+\.(?:gif|png|jpe?g|css))$ /abc/$1 [NC,L]
RewriteRule .* /abc/index.php [L]

Looks like you're having an issue with paths.

From your comments, I assume that your assets and links are written like this:

<link rel="stylesheet" href="/bootstrap.css" />
<img src="/mypic.png"/>
<a href="/what/ever.html">click</a>

Those links are absolute (notice the leading /). Which means they are pointing to the server root, so:

  • bootstrap.css resolves to myserver.tld/bootstrap.css
  • mypic.png resolves to myserver.tld/mypic.png
  • etc.

They are working on your production website probably because the project is hosted on the server root.

But on your local server, everything is shifted from / to /abc/ which lead to wrong link resolution. So you have two solutions:

Solution 1

Preprend all your links with BASE. If you're using the framework template engine, that would give:

<link rel="stylesheet" href="{{ @BASE }}/bootstrap.css" />
<img src="{{ @BASE }}/mypic.png"/>
<a href="{{ @BASE }}/what/ever.html">click</a>

Solution 2

Inform the browser that all links should be resolved relatively to /abc/ by adding the <base> tag inside your <head> section:

<base href="http://myserver.tld/abc/">

or

<base href="/abc/">

NB: the trailing slash is important. The whole string is treated as a prefix for all links.

Remark

Those 2 solutions are not 100% equivalent, since the 2nd solution impacts anchor links. Indeed, <a href="#foo"> points to:

  • the current page with the first solution
  • the base URI with the second solution (i.e /abc/#foo)

My advice would be to create a VirtualHost. It impacts other Apache config files, but I assume you just want to recreate the environment locally (where you have a full autonomy and power to customize it), so the code of the application will not need to be changed.

Open Windows C:\WINDOWS\system32\drivers\etc\hosts file in any text editor, but with admin rights and add the following line:

127.0.0.1   localcopy.tld

This will tell the system that this host should be handled by a local server.

Now find your hhtpd-vhosts.conf (it should be in C:\xampp\apache\conf\extra\ directory). Remove hashmark from line with

NameVirtualHost *.80

and insert the following lines:

<VirtualHost *:80>
  DocumentRoot C:/xampp/htdocs/abc
  ServerName localcopy.tld
</VirtualHost>

This will tell Apache that when the request to handle localcopy.tld request, it should find the files in C:/xampp/htdocs/abc directory.

Finally you need to modify Apache main config file to allow Virtual Hosts. Open the main Apache configuration file, httpd.conf, in a text editor. The file is located in C:\xampp\apache\conf\. Scroll down to the Supplemental configuration section at the end, and locate the following section (around line 500). Remove the hashmark which comments line:

Include conf/extra/httpd-vhosts.conf

That should do it.

A more in depth explanation is available here.

All these will let you access your local copy at http://localcopy.tld.