23

我正在使用 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: '/',
4

5 回答 5

32

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 需要它。我相信最好和最干净的配置是基于这个解决方案的。

在文件中搜索new CopyWebpackPluginin webpack.prod.conf.js

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

创建一个根目录(在您的项目中与静态文件夹相同级别的文件夹) 您可以将其命名为任何您喜欢的名称,但我将root用于示例。

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

现在修改webpack.prod.conf.jsCopyWebpackPlugin 部分,如下所示:

// 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: ['.*']
  }
])
于 2017-12-09T18:31:07.927 回答
20

您也可以只使用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通常存储在站点存储库的根目录中。

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

于 2018-05-15T09:51:43.090 回答
12

我试过没有最后一行的 Rutger Willems 的代码片段,它可以工作。归功于 Hamish Moffatt。

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
于 2019-02-19T10:31:37.587 回答
6

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

于 2020-08-26T21:51:22.883 回答
4

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

于 2018-10-05T11:57:11.163 回答