Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/vue.js/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Vue.js Vuejs-本地链接工作,但在部署链接获得错误404后-未找到文件或目录_Vue.js_Vuejs2 - Fatal编程技术网

Vue.js Vuejs-本地链接工作,但在部署链接获得错误404后-未找到文件或目录

Vue.js Vuejs-本地链接工作,但在部署链接获得错误404后-未找到文件或目录,vue.js,vuejs2,Vue.js,Vuejs2,不知道为什么在本地运行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> &

不知道为什么在本地运行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>

从“/components/layout/Header”导入标题;
导出默认值{
名称:“应用程序”,
组成部分:{
标题
}
};
还有我的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>

{{name}}
导出默认值{ 名称:“标题”, };

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

,但默认代码有效吗?Home | About |这只适用于开发环境。有些人通过反向代理部署开发版本,这绝对是一种错误的部署方式。这完全取决于您如何部署应用程序。我认为此错误是由IIS引起的,请尝试设置URL重写。我找到了google的一个例子:[单击此处]()解决这个问题的第一步应该是打开浏览器开发工具并检查网络选项卡,应用程序到底在发出什么请求。。。