Vue.js 404 Error Fix

### **Solution for Laravel + Vue.js (Inertia.js)**
Since you're using Laravel with Vue.js and Inertia.js, you need to configure Laravel to handle Vue routes properly.

#### **1. Update Laravel Routes**
Make sure your Laravel routes serve the Vue app for unknown routes.

use IlluminateSupportFacadesRoute;
use InertiaInertia;

Route::get('/{any}', function () {
    return Inertia::render('App');
})->where('any', '.*');

This ensures that Laravel serves the Vue application for any undefined route.

—

#### **2. Check Vue Router Mode**
In your `router.js` file, ensure that Vue Router is using **history mode**.

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
  ],
});

export default router;

If you're using `createWebHashHistory()`, the issue won't occur, but URLs will contain `#/`, which isn't ideal for SEO.

—

#### **3. Configure Apache (if using it)**
Since you're using **Apache on AWS EC2**, update your `.htaccess` file in the **public** folder:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^ index.php [L]
</IfModule>

This ensures that all requests are redirected to Laravel, which then serves the Vue app.

—

#### **4. Configure Nginx (if using it)**
If your server is running **Nginx**, update your Nginx config:

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

—

### **Final Steps**
– **Clear caches:**

php artisan config:clear
  php artisan route:clear

– **Restart Apache/Nginx:**

sudo systemctl restart apache2  # For Apache
  sudo systemctl restart nginx    # For Nginx

This should resolve the **404 error on page refresh** in your Vue.js + Laravel + Inertia.js application. 🚀 Let me know if you need further assistance!

—

### **Solution Based on Your Hosting Environment**

#### **1. If Using Apache**
You need to configure the `.htaccess` file to redirect all requests to `index.html`, which Vue can then handle.

📌 **Create or edit your `.htaccess` file in the root folder (where `index.html` is located)**:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

This ensures that any unknown route is redirected to `index.html`, allowing Vue Router to handle the request.

—

#### **2. If Using Nginx**
Modify your **Nginx configuration** to serve `index.html` for all routes:

📌 **Edit your Nginx config file (usually in `/etc/nginx/sites-available/default` or `/etc/nginx/conf.d/default.conf`)**:

server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/html/dist; # Change to your Vue build folder

    index index.html;
    
    location / {
        try_files $uri /index.html;
    }

    location /assets/ {
        try_files $uri =404;
    }
}

👉 **Restart Nginx after making changes:**

sudo systemctl restart nginx

—

#### **3. If Using Vite with Static Hosting (Netlify, Vercel, Firebase, etc.)**
If your Vue app is built with **Vite**, most static hosts require a special redirect configuration.

– **Netlify:** Create a `_redirects` file inside `dist/` with the following:

/* /index.html 200

– **Vercel:** Add a `vercel.json` file:

{
    "rewrites": [
      { "source": "/(.*)", "destination": "/index.html" }
    ]
  }

– **Firebase:** Add this to `firebase.json`:

{
    "hosting": {
      "rewrites": [
        { "source": "**", "destination": "/index.html" }
      ]
    }
  }

—

#### **4. Check Vue Router Configuration**
Make sure your **Vue Router** is using history mode properly:

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(), // Make sure this is not 'createWebHashHistory()'
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
  ],
});

export default router;

👉 **If you use `createWebHashHistory()`, the issue won’t occur, but URLs will have `#/` (e.g., `/#/about`).**

—

### **Final Steps**
1. **Rebuild the project**

npm run build

2. **Deploy the `dist/` folder to your server**
3. **Restart the web server**
4. **Test by refreshing a route (e.g., `/about`)** ✅

—

### **Summary**
✔ If using **Apache** → Add `.htaccess`
✔ If using **Nginx** → Update `nginx.conf`
✔ If using **Netlify/Vercel/Firebase** → Add the appropriate rewrite rules
✔ **Ensure Vue Router uses `createWebHistory()`**

This will **fix the 404 error on page refresh** in your Vue.js production build. Let me know if you need further help! 🚀

if (to.meta.requiresAuth && !authStore.token) {
next('/login'); // Redirect if not logged in
} else {
next();
}
});
export default router

—

### **Fixing 404 on Page Refresh in Production**

### **1. Fix the Typo in Your Code**
There's a **typo** in your import for `YoutubeView.vue`:

import Youtubeiew from '@/views/Youtubeiew.vue'

✅ Change it to:

import YoutubeView from '@/views/YoutubeView.vue'

—

### **2. Configure Your Web Server (Choose Based on Your Setup)**

#### **Apache (For Shared Hosting or VPS)**
Create or update your **`.htaccess`** file in the `dist/` directory:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

✔ **Restart Apache**:

sudo systemctl restart apache2

—

#### **Nginx (For VPS or Dedicated Server)**
Modify your **Nginx configuration** (`/etc/nginx/sites-available/default` or `/etc/nginx/nginx.conf`):

server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/html/dist; # Change this to your Vue build folder

    index index.html;
    
    location / {
        try_files $uri /index.html;
    }

    location /assets/ {
        try_files $uri =404;
    }
}

✔ **Restart Nginx**:

sudo systemctl restart nginx

—

#### **Netlify (For Static Hosting)**
Create a `_redirects` file in the **`dist/`** folder:

/* /index.html 200

—

#### **Vercel (For Serverless Hosting)**
Create a `vercel.json` file:

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

—

#### **Firebase Hosting**
Modify `firebase.json`:

{
  "hosting": {
    "rewrites": [
      { "source": "**", "destination": "/index.html" }
    ]
  }
}

—

### **3. Rebuild and Deploy**
After applying the fix for your hosting type, **rebuild and deploy** your Vue project:

npm run build

Then **upload the `dist/` folder** to your server.

—

### **Final Checklist**
✔ **Fix Typo in Vue Router Imports**
✔ **Set Up Apache/Nginx Rewrite Rules**
✔ **Add Redirects for Static Hosting**
✔ **Rebuild and Deploy Your Vue App**

After these steps, refreshing any route (`/dashboard`, `/profile`, etc.) should work **without a 404 error**! 🚀 Let me know if you need further assistance.

—

## **1. Confirm the Build Directory and Deployment**
Since you're using **Vue Router with `createWebHistory()`**, ensure your build is properly deployed.

Run:

npm run build

This should generate a **`dist/` folder** containing the necessary static files. Make sure you **deploy the contents of the `dist/` folder**, not the entire Vue project.

—

## **2. Check Server Setup Based on Your Hosting Environment**

### **Apache (Shared Hosting or VPS)**
If you're hosting on Apache, ensure your `.htaccess` file is inside the **`dist/`** directory.

📌 **Create or update `.htaccess` in `dist/`:**

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

📌 **Restart Apache:**

sudo systemctl restart apache2

—

### **Nginx (For VPS or Dedicated Server)**
If using **Nginx**, ensure your configuration file is properly set up.

📌 **Edit Nginx configuration (`/etc/nginx/sites-available/default` or `/etc/nginx/nginx.conf`):**

server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/html/dist; # Ensure this points to your Vue build folder

    index index.html;
    
    location / {
        try_files $uri /index.html;
    }

    location /assets/ {
        try_files $uri =404;
    }
}

📌 **Restart Nginx:**

sudo systemctl restart nginx

—

### **3. Check If the Server Is Serving the Correct Files**
Run:

ls -l /var/www/html/dist

Ensure your **`index.html` and `assets/` folder** exist inside `/var/www/html/dist`.

Try **accessing `index.html` manually** by visiting:

http://yourdomain.com/index.html

✅ If it loads fine but **routes like `/dashboard` still return 404**, then your rewrite rules aren't applied.

—

### **4. Verify Router Mode and Base URL**
Check your **Vue Router setup** inside `router.js`:

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),  // Ensure BASE_URL is set correctly
  routes: [
    { path: '/', component: HomeView },
    { path: '/dashboard', component: DashboardView, meta: { requiresAuth: true } },
  ],
});

📌 **Check `vite.config.js`:**
Ensure you have the correct `base` set:

export default defineConfig({
  base: '/',
  plugins: [vue()],
})

If you're deploying to a subdirectory (e.g., `yourdomain.com/app/`), set `base: '/app/'` in `vite.config.js`.

—

### **5. Test With Different Router Modes**
If nothing else works, switch to `createWebHashHistory()` (temporary fix):

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(), // Uses hash-based routing (e.g., /#/dashboard)
  routes: [...],
});

This avoids server-side issues but adds `#` to URLs.

—

### **6. Clear Cache and Try Again**
If you've applied fixes but the error persists:
– **Clear browser cache**
– **Restart the server**
– **Try opening a private/incognito window**

—

## **Final Summary**
✅ **Ensure `dist/` is correctly deployed**
✅ **Configure Apache/Nginx to redirect all requests to `index.html`**
✅ **Verify Router is using `createWebHistory()` with correct `base`**
✅ **Try switching to `createWebHashHistory()` for debugging**
✅ **Clear cache and restart the server**

If the problem persists, let me know your **hosting type** and **server logs** so we can debug further! 🚀

—

### **1. Identify Where the Issue Occurs**
Try these steps in the browser:

✅ **Go to your domain manually** (`https://yourdomain.com`).
✅ **Navigate to a route** (e.g., `/dashboard`).
✅ **Press F12 > Network Tab > Refresh Page** and check:
– If the request to `/dashboard` returns **404**, it’s a server issue.
– If the page loads correctly after clicking links (but not on refresh), it’s a routing issue.

—

### **2. Ensure Your Vue Build is Correct**
Run:

npm run build

Check if `dist/` contains:

index.html
assets/
js/
css/
favicon.ico

If `dist/` is empty or missing files, delete `dist/` and rebuild:

rm -rf dist
npm run build

—

### **3. Check Your Server Type & Apply Fixes**
Depending on where you're hosting your Vue app, you need different fixes.

#### **✅ Apache (Shared Hosting or

we have created this
Alias /frontend /var/www/vuefront/dist

Options Indexes FollowSymLinks
AllowOverride All
Require all granted

—

## **🔍 1. Problem Diagnosis**
With your current setup:
– `/frontend` (loads `index.html` correctly ✅)
– `/frontend/news` (404 on refresh ❌)

### **💡 Why does this happen?**
When you refresh `/frontend/news`, Apache tries to find `/var/www/vuefront/dist/news`, but no such file exists. Vue is handling routes **client-side**, but Apache isn't redirecting all requests to `index.html`.

—

## **🔧 2. Fix: Add Apache Rewrite Rules**
### **Solution: Modify Apache VirtualHost**
You need to tell Apache to **redirect all unknown routes to `index.html`**.

### **Edit Apache Configuration**
Run:

sudo nano /etc/apache2/sites-available/000-default.conf

Then, update it like this:

Alias /frontend /var/www/vuefront/dist

<Directory /var/www/vuefront/dist>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted

    RewriteEngine On
    RewriteBase /frontend
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /frontend/index.html [L]
</Directory>

### **Restart Apache**

sudo systemctl restart apache2

—

## **🛠 3. Create `.htaccess` in `dist/`**
Inside `/var/www/vuefront/dist/`, create or update `.htaccess`:

sudo nano /var/www/vuefront/dist/.htaccess

Add the following:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /frontend
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

### **Restart Apache Again**

sudo systemctl restart apache2

—

## **🔍 4. Verify Everything**
### ✅ **Test these cases:**
| Action | Expected Outcome |
|———|—————-|
| Open `http://your-ec2-ip/frontend/` | Loads Vue app ✅ |
| Open `http://your-ec2-ip/frontend/news` | Loads Vue app ✅ |
| Refresh on `/frontend/news` | **No 404 error** ✅ |

If the issue persists, **clear cache**:

sudo systemctl restart apache2

or

sudo service apache2 restart

and test again.

—

### **Final Summary**
✅ **Apache must redirect all unknown routes to `index.html`**
✅ **Added rewrite rules in Apache config and `.htaccess`**
✅ **Restarted Apache & Cleared Cache**

Try this and let me know if you're still getting a 404 on refresh! 🚀

—

## **1️⃣ Check If Apache Mod_Rewrite Is Enabled**
First, confirm that **mod_rewrite** is enabled on Apache. Run:

sudo a2enmod rewrite
sudo systemctl restart apache2

Then, test if `mod_rewrite` is active:

apachectl -M | grep rewrite

If you don’t see `rewrite_module`, enable it again and restart Apache.

—

## **2️⃣ Update Apache VirtualHost Configuration**
Make sure your Apache configuration correctly **redirects all Vue.js routes to `index.html`**.

Run:

sudo nano /etc/apache2/sites-available/000-default.conf

Update your config to:

<VirtualHost *:80>
    ServerAdmin admin@yourdomain.com
    DocumentRoot /var/www/vuefront/dist

    Alias /frontend /var/www/vuefront/dist

    <Directory /var/www/vuefront/dist>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted

        RewriteEngine On
        RewriteBase /frontend
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule ^ /frontend/index.html [L]
    </Directory>
</VirtualHost>

Save the file (`CTRL + X`, then `Y`, then `Enter`).

### **Restart Apache**

sudo systemctl restart apache2

—

## **3️⃣ Ensure `.htaccess` Exists in `dist/`**
Inside your Vue build folder (`/var/www/vuefront/dist`), create an `.htaccess` file:

sudo nano /var/www/vuefront/dist/.htaccess

Paste the following:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /frontend
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

Save and exit.

Restart Apache again:

sudo systemctl restart apache2

—

## **4️⃣ Clear Browser & Apache Cache**
To ensure old settings are not affecting the app:

– **Clear Browser Cache** (Shift + Refresh)
– **Clear Apache Cache**

sudo systemctl restart apache2

—

## **5️⃣ Verify & Test**
✅ Open `http://your-ec2-ip/frontend/` → Should load Vue.js ✅
✅ Navigate to `http://your-ec2-ip/frontend/news` → Should work ✅
✅ **Press F5 (refresh on `/frontend/news`)** → Should NOT give a 404 ✅

—

### **If the 404 Error Still Persists:**
1. Run:

sudo tail -f /var/log/apache2/error.log

Refresh the page and check for errors.
2. Check Vue Router history mode:
– If `createWebHistory(import.meta.env.BASE_URL)` isn't working, try `createWebHashHistory()`

import { createWebHashHistory } from 'vue-router'

– If it works

—

## **1️⃣ Check If Apache Is Serving Files Correctly**
First, test whether Apache is correctly serving your Vue app.

– Open: **http://your-ec2-ip/frontend/**
If the homepage **loads**, then Apache is serving static files. ✅
– Open: **http://your-ec2-ip/frontend/some-random-url**
If it **gives 404**, then Apache isn't redirecting to `index.html`. ❌

—

## **2️⃣ Update Apache VirtualHost Configuration**
If Apache is not redirecting Vue.js routes correctly, modify the Apache config:

### **Edit Apache Configuration**

sudo nano /etc/apache2/sites-available/000-default.conf

Modify it as follows:

<VirtualHost *:80>
    ServerAdmin admin@yourdomain.com
    DocumentRoot /var/www/vuefront/dist

    Alias /frontend /var/www/vuefront/dist

    <Directory /var/www/vuefront/dist>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted

        # Enable Rewrite Engine
        RewriteEngine On
        RewriteBase /frontend

        # Redirect all non-existent files to index.html
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /frontend/index.html [L]
    </Directory>
</VirtualHost>

Save and exit (`CTRL + X`, then `Y`, then `Enter`).

### **Restart Apache**

sudo systemctl restart apache2

—

## **3️⃣ Ensure `.htaccess` Exists in `dist/`**
Inside your Vue **build folder** (`/var/www/vuefront/dist`), create or update `.htaccess`:

sudo nano /var/www/vuefront/dist/.htaccess

Paste the following:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /frontend
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

Save and restart Apache:

sudo systemctl restart apache2

—

## **4️⃣ Check If mod_rewrite Is Enabled**
Make sure `mod_rewrite` is enabled:

sudo a2enmod rewrite
sudo systemctl restart apache2

Then verify:

apachectl -M | grep rewrite

If you see `rewrite_module`, it’s enabled. ✅

—

## **5️⃣ Double-Check Vue Router Configuration**
Your Vue Router is using **`createWebHistory()`**, which requires Apache to **handle history mode**. If the issue persists, switch to `createWebHashHistory()` and rebuild the project.

### **Modify `router.js`**

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(), // Use hash mode instead of history mode
  routes: [
    { path: '/', component: HomeView },
    { path: '/news', component: NewsView },
    { path: '/youtube', component: Youtubeiew },
    { path: '/login', component: LoginView },
    { path: '/register', component: RegisterView },
    { path: '/dashboard', component: DashboardView, meta: { requiresAuth: true } },
    { path: '/profile', component: ProfileView, meta: { requiresAuth: true } },
    { path: '/settings', component: SettingsView, meta: { requiresAuth: true } },
  ]
});

—

## **6️⃣ Rebuild and Deploy the Vue App**
If you changed the router mode, rebuild the Vue app:

npm run build

Then, **copy the `dist/` folder** to `/var/www/vuefront/`.

sudo cp -r dist/* /var/www/vuefront/

Restart Apache:

sudo systemctl restart apache2

—

## **7️⃣ Test and Debug**
### ✅ Test These Cases
| URL | Expected Outcome |
|—-|—————-|
| `http://your-ec2-ip/frontend/` | Vue homepage loads ✅ |
| `http://your-ec2-ip/frontend/news` | Works normally ✅ |
| **Refresh on `/frontend/news`** | Works without 404 ✅ |

—

## **Final Summary**
✔️ **Updated Apache VirtualHost to redirect unknown paths to `index.html`**
✔️ **Ensured `.htaccess` properly redirects routes**
✔️ **Enabled `mod_rewrite` in Apache**
✔️ **Switched to `createWebHashHistory()` if `createWebHistory()` was causing issues**
✔️ **Rebuilt and redeployed the Vue app**

🚀 Try this and let me know if the 404 still persists!

—

## **1️⃣ Update Your `frontend.conf`**
Modify `/etc/apache2/sites-available/frontend.conf`:

sudo nano /etc/apache2/sites-available/frontend.conf

Paste the following:

<VirtualHost *:80>
    ServerAdmin admin@yourdomain.com
    DocumentRoot /var/www/vuefront/dist
    ServerName yourdomain.com
    ServerAlias www.yourdomain.com

    <Directory /var/www/vuefront/dist>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted

        # Enable Rewrite Engine
        RewriteEngine On
        RewriteBase /

        # Redirect all non-existent files to index.html
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /index.html [L]
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/frontend_error.log
    CustomLog ${APACHE_LOG_DIR}/frontend_access.log combined
</VirtualHost>

### **🚀 Key Fixes in This Configuration**
✔️ **Ensures that unknown URLs go to `index.html`**
✔️ **Logs errors to `frontend_error.log` for debugging**
✔️ **Supports `createWebHistory()` in Vue.js**

—

## **2️⃣ Enable Your `frontend.conf`**

sudo a2ensite frontend.conf
sudo systemctl restart apache2

—

## **3️⃣ Verify That `mod_rewrite` Is Enabled**

sudo a2enmod rewrite
sudo systemctl restart apache2
apachectl -M | grep rewrite

If you see `rewrite_module`, it’s enabled ✅.

—

## **4️⃣ Add `.htaccess` in `dist/`**
In `/var/www/vuefront/dist/.htaccess`:

sudo nano /var/www/vuefront/dist/.htaccess

Paste this:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

Restart Apache again:

sudo systemctl restart apache2

—

## **5️⃣ Clear Browser Cache & Test**
Now, test the following:

✅ `http://your-ec2-ip/` → Should load Vue.js app
✅ `http://your-ec2-ip/news` → Should work
✅ Refresh on `http://your-ec2-ip/news` → Should NOT give 404

—

## **6️⃣ Alternative Fix: Use Hash Mode in Vue Router**
If the issue **still persists**, change `createWebHistory()` to `createWebHashHistory()` in `router.js`:

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(), // Use hash mode
  routes: [
    { path: '/', component: HomeView },
    { path: '/news', component: NewsView },
    { path: '/youtube', component: Youtubeiew },
    { path: '/login', component: LoginView },
    { path: '/register', component: RegisterView },
    { path: '/dashboard', component: DashboardView, meta: { requiresAuth: true } },
    { path: '/profile', component: ProfileView, meta: { requiresAuth: true } },
    { path: '/settings', component: SettingsView, meta: { requiresAuth: true } },
  ]
});

Then **rebuild Vue.js**:

npm run build

And copy `dist/` again:

sudo cp -r dist/* /var/www/vuefront/

—

## **Final Steps**
✔️ **Check logs for errors:**

sudo tail -f /var/log/apache2/frontend_error.log

✔️ **If still 404, try accessing**:
👉 `http://your-ec2-ip/index.html` → If this works, it means Apache isn't rewriting correctly.

💡 **Let me know what happens, and we can debug further!** 🚀

Options Indexes FollowSymLinks
AllowOverride All
Require all granted

### **✅ Solution: Enable Rewrite Rules for Vue.js in Alias**
Modify your Apache configuration and add **rewrite rules** inside the “ block.

—

### **1️⃣ Update Your Apache Configuration**
Edit your Apache config file (`frontend.conf` or main site config):

sudo nano /etc/apache2/sites-available/frontend.conf

Modify it to include the rewrite rules:

Alias /frontend /var/www/vuefront/dist

<Directory /var/www/vuefront/dist>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted

    # Enable Rewrite Engine
    RewriteEngine On
    RewriteBase /frontend/

    # Redirect all non-existent files to index.html
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /frontend/index.html [L]
</Directory>

**Key Fixes:**
✔️ **Ensures Vue.js handles routing (prevents 404 on refresh)**
✔️ **Works with your `/frontend` alias**

—

### **2️⃣ Enable `mod_rewrite` & Restart Apache**

sudo a2enmod rewrite
sudo systemctl restart apache2

—

### **3️⃣ Add `.htaccess` Inside `dist/`**
If `AllowOverride All` is set, add a `.htaccess` file inside `/var/www/vuefront/dist/`:

sudo nano /var/www/vuefront/dist/.htaccess

Paste this:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /frontend/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /frontend/index.html [L]
</IfModule>

Then restart Apache:

sudo systemctl restart apache2

—

### **4️⃣ Clear Cache & Test**
1. **Clear browser cache** and **hard refresh** (`Ctrl + Shift + R`).
2. **Try navigating to `/frontend/news` and refresh**.
3. If still 404, check Apache logs:

sudo tail -f /var/log/apache2/error.log

—

### **5️⃣ Alternative: Use Hash Mode in Vue Router**
If you **still get 404 errors**, modify your `router.js` to use `createWebHashHistory()` instead:

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(), // Use hash mode
  routes: [
    { path: '/', component: HomeView },
    { path: '/news', component: NewsView },
    { path: '/youtube', component: Youtubeiew },
    { path: '/login', component: LoginView },
    { path: '/register', component: RegisterView },
    { path: '/dashboard', component: DashboardView, meta: { requiresAuth: true } },
    { path: '/profile', component: ProfileView, meta: { requiresAuth: true } },
    { path: '/settings', component: SettingsView, meta: { requiresAuth: true } },
  ]
});

Then **rebuild Vue.js**:

npm run build

And redeploy:

sudo cp -r dist/* /var/www/vuefront/

—

### **Final Steps**
✔️ **Test `/frontend` and refresh**
✔️ **Check if `/frontend/news` refresh works**
✔️ **If still an issue, check logs**:

sudo tail -f /var/log/apache2/error.log

**Let me know if you still face issues! 🚀**