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

Question

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

Answer 1

vue-cli 创建了 app 3.x

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