John Davidson

Message:

EDIT: Question title changed. The original question title was: Using a relative URL in a Vue app that works in both production and development, but this turned out not to be the cause of my problem (see comments below).

I've tried so many things and all I want to do is use a single relative url in a JavaScript fetch() method and have it run consistently in both development and production without having to change lots of config files or webpack settings.

In a nutshell I want to fetch() a get-users.php file which resides in the same directory as the app — nothing fancy or complicated — just a php file that gets some data from a mysql database on the same host.

I can make it work in development, but then it fails in production (npm run build), OR I can get it working in production but then it fails in development (npm run serve). The reason it fails is essentially because the relative url in production is the root of the dist folder, but the relative url in development is the root of the vue project folder — is that correct?. So in development for example I can use fetch(public/get-users.php) which works perfectly, but then in production the dist folder doesn't contain a public folder so I get a 404 error. I can manually copy and paste the public folder to the dist folder after each build, but this just seems like an unnecessary extra step.

Part of the problem is that I don't fully understand where a file like get-users.php should reside. I don't mind if I have to put it in the public or static folders, but when I do that it fails in production because of the example above. Could someone please explain the role of the public folder in a Vue CLI app please? Does it do something under the hood that I don't fully understand? Am I missing something obvious? It seems like such a trivial task to make this work but I'm banging my head against the wall here! Please help! :)

---

My Answer:
The public folder in a Vue CLI app is where you can place static assets that you want to be served as-is without any processing by webpack. This folder is directly copied to the root of the build output (dist folder) during the build process.

In your case, if you want to access the get-users.php file using a relative URL in both development and production, you can place the php file in the public folder. This way, the file will be available at the root of your project in development and at the root of the build output in production.

You can then access the php file using a relative URL like fetch('/get-users.php') in your JavaScript code. This should work consistently in both development and production environments without the need to manually copy the file after each build.

Make sure to restart the development server (npm run serve) after placing the php file in the public folder to ensure that the changes are picked up.