CODEWITHSUNDEEP
vue.jsvuejs2
Steve
Steve

Reputation: 4463

Vuejs - Local link works but after deploy link gets error 404 - File or directory not found

Not sure why when I run my Vue app locally, the navbar links works. But after deploy, it gets an error

404 - File or directory not found.
The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.

When I inspect it, I get:

This is my App.vue:

<template>
  <div id="app">
    <Header
      name=""
      :navLinks="[
        {
          name: 'Home',
          link: '/',
          dropdown: false
        },
        { name: 'Students', link: '/students', dropdown: false }
      ]"
    />
    <router-view />
    <Footer />
  </div>
</template>
<script>
import Header from "./components/layout/Header";
export default {
  name: "app",
  components: {
    Header
  }
};
</script>

and my Header.vue

<template>
  <div>
    <nav>
      <div v-if="name" id="logo">
        {{ name }}
      </div>
      <div v-else id="logo">
        <img alt="Vue logo" src="../../assets/stevelogo.png" width="50" />
      </div>

      <ul class="nav-links">
        <li v-for="list in navLinks" :key="list.key">
          <a v-if="list.dropdown === false" :href="list.link">{{
            list.name
          }}</a>
          <div class="dropdown-link" v-else>
            <a :href="list.link">
              {{ list.name }}
              <span>&#x2193;</span>
            </a>                
          </div>
        </li>
      </ul>

      <div v-on:click="openMobileNav()" id="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
      </div>
    </nav>
  </div>
</template>

<script>
export default {
  name: "Header",
};
</script>

enter image description here

Upvotes: 0

Views: 497

Answers (1)

Ashutosh Kumar
Ashutosh Kumar

Reputation: 479

There are two types of environment in a Vue Application (or React or Angular)

  • Development
  • Production

While you are running a development server on port 8000, all requests are handled by the development server BUT when you deploy your application all request must go into dist/index.html OR build/index.html (Depending on your build configuration)

You can try to deploy application on netlify.com with following build command

CI='' npm run build &&  echo "/* /index.html 200" > dist/_redirects

Else for you current deployment, you need to change configuration of the deployment so that all requests after /* goes to dist/index.html

Upvotes: 1

Related Questions