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

Posted 2023-02-22

【中文标题】带有参数的 vue-router 无法在 netlify 上运行部署

【英文标题】：vue-router with parameter can't run deploy on netlify

【发布时间】：2019-10-18 06:16:54

【问题描述】：

首页.vue

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

Test1.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] 是工作。为什么？

请帮帮我。对不起语法问题。

【参考方案1】：

Netlify 上有针对 SPA 的特殊部署说明。在此页面上：https://www.netlify.com/docs/redirects/ 如果您转到 历史推送状态和单页应用程序部分，您将看到：

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

/* /index.html 200

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

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

【讨论】：

“_redirects”位于已部署站点的根目录中。我进行了编辑。

我有点困惑这如何解决了我的 404 问题，但确实如此，所以我感谢您，先生。当我让 AWS Cognito 将成功的用户池身份验证请求重定向回我的应用程序（在 Netlify 上运行的 VueJS 2.x 应用程序）中的 vue-router 服务页面时，Netlify 响应 404。我实际上只是在我的代码库的 /public/ 文件夹中添加了一个“_redirects”文件，其中包含这一行，现在它似乎运行良好。

当我在我的 dist 文件夹中添加一个名为“_redirects”的新文件时，它对我有用。

【参考方案2】：

它也在 Vue 文档部署部分

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

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

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

【参考方案3】：

在项目的根目录中创建一个名为 netlify.toml 的文件，然后粘贴：

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200