时间戳

首页 > 解决方案 > Vuejs - 本地链接有效，但部署链接后出现错误 404 - 找不到文件或目录

vue.js - Vuejs - 本地链接有效，但部署链接后出现错误 404 - 找不到文件或目录

问题描述

不知道为什么当我在本地运行我的 Vue 应用程序时，导航栏链接有效。但是部署后，它得到一个错误

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

当我检查它时，我得到：

这是我的 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>

和我的 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>

在此处输入图像描述

标签： vue.jsvuejs2

解决方案

Vue 应用程序（或 React 或 Angular）中有两种类型的环境

  • 发展
  • 生产

当您在端口 8000 上运行开发服务器时，所有请求都由开发服务器处理，但是当您部署应用程序时，所有请求都必须进入 dist/index.html 或 build/index.html（取决于您的构建配置）

您可以尝试使用以下构建命令在 netlify.com 上部署应用程序

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

否则，对于您当前的部署，您需要更改部署的配置，以便 /* 之后的所有请求都转到 dist/index.html

推荐阅读