将_redirects文件添加到Netlify上托管的VUE SPA的root路径

Question

我正在使用vue cli开发一个单页应用程序，并希望历史记录pushstate工作，所以我得到了干净的URL。

我必须遵循以下内容：https：//www.netlify.com/docs/redirects/#history-pushstate-and-single-page-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创建的app 3.x

对于使用VUE-CLI版本3.0.0-Beta.x的新构建设置，现在有一个公共文件夹，您不需要以下设置。只需将_redirects文件放在public文件夹根下即可。当您构建时，它将为您的部署使用Dist文件夹。

VUE-CLI在3.x

之前创建了应用程序

vue.js使用webpack复制静态资产。这是在webpack.prod.conf.js中维护的，用于生产构建，这在这种情况下是Netlify所需的。我相信最好的最干净的配置是基于此解决方案的。

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

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

创建一个root（在您的项目中的文件夹相同的静态文件夹中的文件夹）您可以将其命名为您喜欢的任何东西，但是我将使用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通常存储在您的站点存储库的根部中。

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

Answer 3

我尝试了Rutger Willems的片段而没有最后一行，并且可以使用。信用归Hamish Moffatt。

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

Answer 4

以防万一您在NUXT上寻找答案而不是VUE，请将_redirects文件添加到静态/目录。

Answer 5

您可以在Vue App

Answer 6

vue3（也应在VUE2上使用）。结合上述答案和NetLify网站。对我有用的解决方案是使用netlify.toml文件

1. 创建一个带有以下内容的netlify.toml文件。

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

2. 将其放入public文件夹中。这应该在根目录中。

3. 这将复制到生产中的dist文件夹中。