When Vue-router is built for production, the hashbang is not removed

I recently made a change to my Vue-router configuration by adding mode:'history' in the index file:

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Daksh',
      component: Daksh
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/work',
      name: 'Work',
      component: Work
    }
  ]
})

Initially, everything seemed to be working fine when I tested it with hot reload mode. However, after running npm run build, the functionality stopped working for some unknown reason.

If anyone has any insights or suggestions on how to resolve this issue, your help would be greatly appreciated! Thank you :)

Answer №1

After finding the solution in the comments and following VonC's suggestion to provide an answer for others, here is what you need to do:

If you are using nginx to host your files

Configure the server settings for nginx as shown in the example in the documentation

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Exploring the relationship between Vue checkbox components: parent and

Currently, I am working on a checkbox group where the behavior is such that if the parent checkbox is checked, all the child checkboxes will also be checked. Similarly, if a child checkbox is checked, the parent checkbox should also get checked, and so on. ...

Various Plus/Minus Containers

One issue I am facing is that when using multiple counters on the same page, my - and + buttons to decrease or increase the number in a text box do not function properly. The script provided below works for one counter. How can I modify this code so that ...

What is the best way to use AJAX to navigate to a different webpage while sending data along with

After successfully saving a form and receiving a success message, I am able to redirect to another page using window.location.href = '/home'; with no issues. However, I would like to pass the success message to the home page after the redirect. W ...

Locating items within a complex array and identifying their corresponding positions

I recently found an interesting code snippet from a different question that allowed me to identify an object. However, I am now faced with the challenge of determining the position of that object within the array. Let's take a look at the example belo ...

Retrieving JSON formatted data from PHP using jQuery

If I use a $.post method in jQuery, how can I retrieve the response from PHP? $.post("sql/customer_save.php",{ what: "edit",customer_no: $customer_no}); I want PHP to send back a response. echo json_encode(array("customer_id"=>$customer_id,"customer_ ...

Guide to integrating various HTML files into a single HTML file with the help of Vue.js

Although I am familiar with using require_once() in PHP, unfortunately, I am unable to use PHP in my current project. I attempted to use w3-include from W3Schools as an alternative, but encountered issues with loading my scripts. Even utilizing JavaScript ...

What is the best way to extract JSON data from a remote URL?

Having recently started with JavaScript, I am looking to parse JSON from an external URL using pure JavaScript. Currently, I have the following code: var getJSON = function(url, callback) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, tr ...

Designing a photo frame slider for a unique touch

My skills in javascript and jQuery are limited, but I am looking to create a customizable slider. While exploring options like Flexslider (), I found it challenging to meet the following specifications: Eliminate color gaps between thumbnails Enable thu ...

I am sometimes experiencing issues with activating ajax code using Bootstrap 3 modal

I'm stumped trying to find a solution for this issue. Currently, I am utilizing the bootstrap modal to retrieve ajax content from a specified URL. To prevent content overlap, I am using $.removeData() when reloading the content. The problem arises w ...

A Guide to Retrieving HTML Content Using jQuery's Ajax Method

I am working on a page that contains Option elements with Values linking to external pages. My goal is to utilize Ajax to retrieve the selected Option's Value and use it to load content from those external pages. For example, if a user selects Volleyb ...

Encountering a malfunction while creating a file using electron/vue

I need to save the results of my Electron/Vue app to a file. const fs = require("fs"); try { fs.writeFileSync( "myfile.txt", "the content to be written in the file", " ...

Is there a way to ensure the web app is loaded only once for all the tests in Cypress?

I am currently working on a web app that is hosted on http://localhost:1234/. Whenever the app loads, it requires reading over 1000 JSON files to populate the necessary information. Is there any way to avoid reloading the web app for each test? Running al ...

Tips for automatically loading a page or div with jQuery Ajax based on data from a foreach loop

So far, I have been struggling with the following code for AJAX. It seems like there is an issue with it... <script> $(document).ready(function() { $.ajaxSetup({ cache: false }); setInterval(function() { $('#divTo ...

Combining a 3D array into a 2D array with the addition of HTML tags around each value using JavaScript

3D array // Array var x = { "letter": [ "a", "b", "c", "d", "e", "f", "g", "h", "i" ], "line": [ { "data": [ 306, 830, 377, 651, 547, 369, 300, 148, 494 ] }, { "data": [ 88, 339, 298, 87, 96, 108, 93, 182, 64 ] }, { "data": [ 3157, 2943, ...

Updating the output without the need for a page refresh following the insertion of data into the database

I'm interested in enhancing the interactivity of this section in my code. Currently, I utilize a form to send announcements via ajax to a php file which successfully updates my database. The table displays the data effectively. However, I want these c ...

Swap out a div identifier and reload the page without a full page refresh

I am interested in learning how to dynamically remove a div id upon button click and then add it back with another button click to load the associated CSS. The goal is for the page to refresh asynchronously to reflect these changes. So far, I have successf ...

Ways to eliminate a single child from a jQuery object without altering the HTML structure

My code snippet looks like this: $.fn.extend({ del: function() { } }) var ds = $(".d"); ds.del(ds[0]) console.log(ds.length) I am trying to use jquery.del to remove a child from some jquery elements without altering the HTML. Any suggest ...

Implementing dynamic ng-forms with real-time validation

My directive includes a template with an ng-form: <ng-form name="autocompleteForm"> <div class="form-group" show-errors> <input type="text" class="form-control" ng-model="ctrl.val.value" name="autocompleteField" required> < ...

Finding the least common multiple (LCM) of two or three numbers using JavaScript

I have been working on a code snippet to find the Greatest Common Denominator (GCD) of two or three numbers. Here is what I have so far: Math.GCD = function(numbers) { for (var i = 1 ; i < numbers.length ; i++){ if (numbers[i] || numbers[i] = ...

Struggling with the paste event glitch on Opera versions 11 and under

I have been experimenting with this simple code that is designed to transfer focus to another text box when a right-click is detected on the first one, allowing any subsequent paste event to paste the text into the second box: <!DOCTYPE html> <ht ...