将 _redirects 文件添加到 Netlify 上托管的 Vue SPA 的根路径

Posted 2023-02-22

【中文标题】将 _redirects 文件添加到 Netlify 上托管的 Vue SPA 的根路径

【英文标题】：Add _redirects file to root path for Vue SPA hosted on Netlify

【发布时间】：2018-05-23 13:33:45

【问题描述】：

我正在使用 Vue CLI 开发单页应用程序，并希望历史推送状态能够正常工作，以便获得干净的 URL。

我必须遵循这个：https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps 并将_redirects 文件添加到我的站点文件夹的根目录中：

/*    /index.html   200

问题是我不知道如何将这个 _redirects 文件添加到我的 dist 文件夹的根目录。我尝试将它添加到静态文件夹，但它最终在一个子文件夹中，而不是在根目录中。如何包含此文件，以便在 Netlify 上部署后使用历史模式？

// config/index.js
build: 
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',

【参考方案1】：

vue-cli 创建应用 3.x

对于使用 vue-cli 版本 3.0.0-beta.x 的新构建设置，现在有一个公用文件夹，您不需要以下设置。只需将您的_redirects 文件放在public 文件夹根目录下即可。当你构建它时，它会复制到 dist 文件夹，用于你的部署。

vue-cli 在 3.x 之前创建的应用

Vue.js 使用 webpack 来复制静态资源。这是在webpack.prod.conf.js 中维护的，用于生产构建，在这种情况下，Netlify 需要它。我相信最好和最干净的配置是based on this solution.

在webpack.prod.conf.js 中搜索new CopyWebpackPlugin 的文件。

// copy custom static assets
new CopyWebpackPlugin([
  
    from: path.resolve(__dirname, '../static'),
    to: config.build.assetsSubDirectory,
    ignore: ['.*']
  
])

创建一个根目录（项目中与静态文件夹同级的文件夹） 您可以随意命名，但我将使用 root 作为示例。

然后，您将确保 _redirects 文件位于新的 root 目录或您所称的任何目录中。在这种情况下，它被命名为root

现在修改webpack.prod.conf.js CopyWebpackPlugin 部分，如下所示：

// copy custom static assets
new CopyWebpackPlugin([
  
    from: path.resolve(__dirname, '../static'),
    to: config.build.assetsSubDirectory,
    ignore: ['.*']
  ,
  
    from: path.resolve(__dirname, '../root'),
    to: config.build.assetsRoot,
    ignore: ['.*']
  
])

【讨论】：

是的，我尝试将 _redirects 文件放在静态文件夹中，但随后将其放置在 dist 文件夹中的静态文件夹中，而我需要在构建后将 _redirects 放在根目录中，以便 Netlify 选择起来

对，但是您是否按照上面的答案检查了您的设置？

对于使用 vue-cli 版本 3.0.0-beta.x 的新构建设置，现在有一个公用文件夹，您不需要此设置。只需将您的 _redirects 文件放在 public 文件夹根目录下即可。当你构建它时，它会复制到 dist 文件夹，用于你的部署。

谢谢，它对我有用，即使我使用的是 React.js 16 :)

非常感谢@talves - 让我发疯，_redirects 没有得到正确的服务

【参考方案2】：

您也可以只使用netlify.toml 文件，它往往更干净一些。只需将其放入文件中即可获得您正在寻找的重定向：

# The following redirect is intended for use with most SPA's that handles routing internally.
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

netlify.toml 通常存储在站点存储库的根目录中。

您可以找到有关此文件here 的更多信息。

【讨论】：

这会破坏表单功能

只需删除这一行force = true # Ensure that we always redirect 并添加除此代码在我的视图js 项目中是工作文件之外的历史模式

不要使用 force = true，因为这样您的所有其他资产（包括您的所有 javascript 代码）也会被重定向到 index.html！

【参考方案3】：

我试过没有最后一行的 Rutger Willems 的 sn-p 并且它有效。归功于 Hamish Moffatt。

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

【参考方案4】：

如果您在 Nuxt 而不是 Vue 上寻找答案，请将 _redirects 文件添加到 static/ 目录。

【讨论】：

答案与问题无关

【参考方案5】：

您可以简单地将 _redirects 文件添加到您的 vue 应用程序的 /public 目录中