Question:
: Why is it showing Rout Url 404 - File or directory not found in Vuejs?

Problem:

I have an Error when Refresh the page or write any extra word for a URL like > the Error is 404 - File or directory not found, my project is dotnet core API and vuejs deployed on IIS, and if I write a URL like >https://example.com it works well

I expect that the error is in the URL in files Vue.js or in deploy vuejs in iis


Solution: 

IIS is trying to serve an HTML page that doesn't exist. Single Page Applications only have one page, so anything other than the root index needs to be redirected so that vue-router can handle it instead of IIS.

>https://router.vuejs.org/guide/essentials/history-mode.html#Internet-Information-Services-IIS-

  1. Install IIS UrlRewrite(opens new window)

  2. Create a web. config file in the root directory of your site with the following:


<?xml version="1.0" encoding="UTF-8"?>

<configuration>

  <system.webServer>

    <rewrite>

      <rules>

        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">

          <match url="(.*)" />

          <conditions logicalGrouping="MatchAll">

            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />

            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />

          </conditions>

          <action type="Rewrite" url="/" />

        </rule>

      </rules>

    </rewrite>

  </system.webServer>

</configuration>


Suggested blogs:

>5 easy ways to Repair the .NET Framework on Windows

>Adding new column/columns to the existing table in a migration-Laravel

>Authentication with Vue 3 and Firebase

>Build a minimal API using ASP.NET Core with Android Studio

>Complete guide on Life Cycle of Angular Component

>Complete guide to Perform crud operation in angular using modal popup

>Create a Vue.js application with CLI Services


Nisha Patel

Nisha Patel

Submit
0 Answers