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创建了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在这种情况下所需要的。我认为最好和最干净的配置是based on this solution.

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

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

Answer 3

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

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

Answer 4

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

Answer 5

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

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

5 个答案:

vue-cli创建了app 3.x

vue-cli在3.x