I have created a subdomain test.example.com from cPanel. I then built my Vue app using
npm run build
and zipped the whole dist folder to upload to the server. Once uploaded I expanded the zip file so the files are on the server.
This works perfectly for my home page, check, however, any of the subpages return the 404 while this issue is not observable on the localhost.
I don't understand how to fix this.
I use the vue.config.js with
module.exports = {
publicPath: '/'
}
and also the links to subpages look fine but just don’t work.
You are using history mode in your router, in order for it to work all requests need to go back to index.html
All you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in.
Since you are using cPanel I would assume that your server is using Apache.
Therefore you will need to create a .htaccess file to redirect all requests to index.html. You will need to create the .htaccess file inside your public_html folder (assuming that is where your application code lives). Then add the following.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Related
Im my Apache root directory a have 2 things, a .htaccess and a directory named app. Inside that directory there is a single page app. In the .htaccess I have:
RewriteEngine On
RewriteRule ^$ /app/ [L]
If I go to mysite.com, I can see the index document working, but all the assets called by index.html are missing:
And in fact if I try to query them directly from the browser they all go in 404, like mysite.com/vendor.js. What am I missing?
Converting my comment to answer so that solution is easy to find for future visitors.
You may use this rule to forward all request to app/ folder:
RewriteEngine On
RewriteRule !^app/ app%{REQUEST_URI} [L,NC]
I deployed a Vue App on an hosting platform, i got to know that if i serve
"www.mydomain.com/about" and hit enter, i get 404 Error Page. have i deployed the wrong thing?
npm run build
note: the dist folder was deployed after build
Text
but when you remove /about, the real page got served, and also when you click on the links on the navbar, it shows the about pages. but when you refresh the pages, it return 404 Error.
Why is this so?
You need to config your server because, you are resolving the routes with the server, and not with vue (When you click on the navbar and go to /about, you can access, because you are resolving the route with vue).
Check this link
Uou are using Vue router's history mode. For any page URL to work for vue in this case you will have to make some changes in your web server's configuration. Here are 2 of the most common config settings. Make these changes, restart your web server and your issue will be resolved.
Apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
nginx
location / {
try_files $uri $uri/ /index.html;
}
Full documentation available at https://router.vuejs.org/guide/essentials/history-mode.html.
After doing npm run build I uploaded index.html and the dist folder to my remote server yet the app doesn't work properly: there's no styles at all, routes don't work and most UI elements don't load.
Strangely, the exact same index.html + dist folder, copied anywhere on my local server, works perfectly either as file protocol or http protocol.
I have no idea what to make of this and I can't troubleshoot it because there's no error message in the console even though the app doesn't work. Any suggestion welcome.
Note: I use vue-cli / webpack-simple
If your provider is running Apache web server, upload to the same directory you uploaded your SPA app the .htaccess file with this content:
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) index.html [QSA,L]
</ifModule>
I have written a frontend SPA in Javascript. It uses Ember with its routing, fake URL, authentication and all the amazing stuff Ember handles almost implicitly.
The backend is written in PHP and the page shall be served by an Apache server.
Now, the page works just fine if the request is sent to the root file (aka index) and everything is handled from here. If I however reload the page at let's say localhost/login, Apache tries to find a file named login, which, naturally, doesn't exist, as everything is handled in Javascript and I get the widely-known 404 - The requested URL /login was not found on this server.
How do I tell Apache to always serve index.php, no matter what is in the URL?
It should look something like the default .htaccess for Laravel, which will always serve everything through the /index.php page without the actual /index.php in the url ex /index.php/login will be just /login, but it's worth noting that this will not force it through the /index.php page if the file exists.
# Checks if the rewrite mod is on.
<IfModule mod_rewrite.c>
RewriteEngine On
# Force everything through the index.php file
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
</IfModule>
I have a FuelPHP application that I'm trying to setup to extend an existing website (we'll call it example.com). The FuelPHP installation is in a directory called listings within the DocumentRoot. However, the main index.php file for the application is located in a subdirectory of listings called public, so the actual path to the index.php file is <DocumentRoot>/listings/public/index.php. The static assets (JavaScript, CSS and images) for the application are in subdirectories of the public directory as well.
I want people to be able to access the application at /properties. Also, there will be requests made for other pages (such as /properties/admin) as well as requests for static assets (such as /properties/assets/css/style.css).
I've got this thing about 90% working. The .htaccess file in the DocumentRoot looks like this:
RewriteEngine On
RewriteRule ^properties/?(.*)$ /listings/public/index.php/$1 [L]
Inside the public directory, there is another .htaccess file that looks like this:
Options +FollowSymLinks -Indexes
RewriteEngine on
# Send request via index.php (not if its a real file or folder)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
I set the $base_url in the FuelPHP config to http://example.com/properties/. All of the URLs for the static assets are appearing the way I would expect them to, for example, the path to my bootstrap.css file appears as http://example.com/properties/assets/css/bootstrap.css. This is what I expect. However, instead of Apache grabbing the static asset, it's running the request though the FuelPHP index.php file, resulting in a 404.
I think I need to add a RewriteCond to the .htaccess file that is in the DocumentRoot, but I'm not exactly sure if that's correct, or what that RewriteCond would look like.
How do I adjust my .htaccess file(s) so that I'm able to access static assets such as http://indyapm.com/properties/assets/css/bootstrap.css which is actually located at <DocumentRoot>/listings/public/assets/css/bootstrap.css?
I believe what you want is a RewriteBase
RewriteEngine On # after this
RewriteBase /properties/ # insert this
That, having your main config set up with the correct base url should do the trick.