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

Question

我正在使用 Vue CLI 开发一个单页应用程序，并希望历史 pushstate 能够工作，以便我获得干净的 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: '/',

Answer 1

vue-cli 创建应用程序 3.x

对于使用 vue-cli 版本 3.0.0-beta.x 的新构建设置，现在有一个 public 文件夹，您不需要以下设置。只需将 _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: ['.*']
  }
])

Answer 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。

Answer 3

您只需将 _redirects 文件添加到您的 vue 应用程序的 /public 目录中

Answer 4

我已经试过没有最后一行的 Rutger Willems 的代码片段并且它有效。感谢 Hamish Moffatt。

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

Answer 5

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

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

Add _redirects file to root path for Vue SPA hosted on Netlify

vue.js

single-page-application

vue-cli

netlify

vue-cli 创建应用程序 3.x

vue-cli 在 3.x