on refresh page vue.js application return 404

// Step 1: Check your router configuration in your Vue.js application.
// Make sure you have properly configured routes using Vue Router.
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  // Define other routes here
];

const router = new VueRouter({
  mode: 'history',
  routes,
});

export default router;

// Step 2: Ensure your server is configured to handle history mode in Vue Router.
// For example, in Node.js with Express:
const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

// Step 3: Make sure you've set up your Vue CLI to build the application properly.
// Check your vue.config.js file:
module.exports = {
  publicPath: '/',
  outputDir: 'dist',
};

// Step 4: Check the base URL in your Vue instance to ensure it matches your deployment environment.
// In your main.js or where your Vue instance is created:
import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

// Step 5: Verify the build process and ensure the files are being generated correctly.
// Run the build command for your Vue application:
// For Vue CLI 3:
// vue-cli-service build
// For Vue CLI 2:
// npm run build

// Step 6: Check if there are any errors or warnings in the browser console when you refresh the page.
// Use browser developer tools (e.g., Chrome DevTools) to inspect the console for any relevant error messages.

// Step 7: Double-check the paths and file references in your Vue components and templates.
// Ensure that all paths to assets, scripts, or other resources are correct and not pointing to non-existent locations.

// Step 8: If you're using a hosting service, verify that it supports Vue Router's history mode.
// Some hosting services might require additional configuration to work properly with history mode.

// Step 9: Consider using a fallback solution like hash mode temporarily to ensure navigation works.
// Change the mode in your Vue Router configuration to 'hash':
const router = new VueRouter({
  mode: 'hash', // Change this line
  routes,
});

// Step 10: If you're encountering issues specific to your hosting environment, consult their documentation or support for guidance.
// Hosting environments like Netlify, GitHub Pages, or AWS may have specific configurations required for Vue Router.