带有参数的 vue-router 无法在 netlify 上运行部署

Question

主页.vue

<template>
  <h3>Home</h3>
</template>

测试1.vue

<template>
  <h3>TEst page {{symbol}}</h3>
</template>

<script>
export default {
  data() {
      return {
        symbol: this.$route.params.id
      }
    },
}
</script>

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/test/:id',
      component: Test1
    },
    {
      path: '/home',
      component: Home
    },
  ]
})

我无法通过网站 [netlifylink/test/1] 调用。它是“页面未找到，您似乎访问了一个损坏的链接或输入了该站点上不存在的 URL”。

但是仍然可以访问 localhost:8080/test/1

我打电话给 localhost:8080/home 并且 [netlifylink/home] 工作正常。为什么？

请帮帮我。对不起语法。

Answer 1

它也在Vue文档部署部分

https://cli.vuejs.org/guide/deployment.html#netlify

为了history mode在 Vue Router 上接收直接命中，您需要创建一个名为_redirectsunder的文件/public，其内容如下：

# Netlify settings for single-page application
/*    /index.html   200

Answer 2

Netlify 上有针对 SPA 的特殊部署说明。在此页面上：https : //www.netlify.com/docs/redirects/如果您转到History Pushstate 和 Single Page Apps部分，您将看到：

如果您正在开发单页应用程序并希望历史推送状态起作用以便获得干净的 URL，则需要启用以下重写规则：

/* /index.html 200

无论浏览器请求什么 URL，这都将有效地为 index.html 提供服务，而不是给出 404。

您需要将其添加到已_redirects建站点根目录下的文件中。