将_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文件夹的根目录.我尝试将它添加到静态文件夹,但它最终在子文件夹中而不是在root中.如何在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在这种情况下所需要的.我相信最好和最干净的配置是基于这个解决方案.

搜索文件new CopyWebpackPlugin在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: ['.*']
  }
])

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
  force = true # Ensure that we always redirect

您可以在此处找到有关该netlify.toml文件的更多信息.

Answer 3

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

Answer 4

我已经尝试了Rutger Willems的代码段，但没有最后一行，它可以正常工作。归功于Hamish Moffatt。

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

Answer 5

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