How to remove hashbang # from url if I use CDN?

Question

I can't remove hashbang # from URL using Vue router with CDN. For example, I have URL example.com/#/about, I want to make it like this: example.com/about

I tried to change VueRouter.createWebHashHistory() to VueRouter.createWebHistory(), but it doesn't work. While with VueRouter.createWebHashHistory() it works, but URL has hashbang #. When I use createWebHistory browser reloading a page.

My code:

const app = Vue.createApp({
  data() {
    return {
      title: "Vue routing",
    }
  }
});

const Home = {
  template: `<h1> Home</h1>`
};
const About = {
  template: `<h1> About</h1>`
};
const Portfolio = {
  template: `<h1> Portfolio</h1>`
};
const Contact = {
  template: `<h1> Contact</h1>`
};

const routes = [{
    path: "/",
    component: Home
  },
  {
    path: "/about",
    component: About
  },
  {
    path: "/portfolio",
    component: Portfolio
  },
  {
    path: "/contact",
    component: Contact
  },
  {
    path: "/post/:id",
    component: Contact
  }
];

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(), //VueRouter.createWebHistory() doesn't work
  routes
})

document.title = 'test';

app.use(router)
app.mount('#app5')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue-router@4"></script>


<div id="app5">
  <h1>{{ title }}</h1>

  <!-- i links -->
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
  <router-link to="/portfolio">Portfolio</router-link>
  <router-link to="/contact">Contact</router-link>
  <router-link to="/post/5">Post 5</router-link>
  <router-link to="/post/7">Post 7</router-link>

  <!-- contenitore per il HTML -->
  <router-view></router-view>
</div>

Answer 1

It seems like you are using Vue 3 and Vue Router 4. When you want to remove the hash (#) from the URL and use clean URLs, you should use createWebHistory() instead of createWebHashHistory().

If you're facing issues with createWebHistory(), it could be due to the configuration of your server. When using createWebHistory(), you need to ensure that your server is configured to handle client-side routing correctly. This involves making sure that the server returns the main index.html file for all routes, allowing Vue Router to take over and handle the routing on the client side.

Here are a few steps you can follow:

Ensure Server Configuration:

Make sure your server is configured to return the index.html file for all routes. If you are using a server like Express, you might need to add a wildcard route to handle all routes. Configure Server to Handle History Mode:

If you are deploying your application to a server, make sure it is configured to support history mode. In Apache, you might use the mod_rewrite module. Here's an example of how you might configure Express.js to work with history mode:

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 is running on port ${port}`);
});

Make sure to adjust the paths and configurations based on your project structure.

Verify Browser Support: Ensure that the browsers you are testing in support the HTML5 History API. All modern browsers support it, but if you are testing in older browsers, there might be issues. After making these adjustments, using createWebHistory() should work as expected, and you should be able to remove the hash from the URL.