web-dev-qa-db-ja.com

NetlifyでホストされているVue SPAのルートパスに_redirectsファイルを追加します

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: '/',
vue.jssingle-page-applicationvue-clinetlify
17
Alex

vue-cliで作成されたアプリ3.x

Vue-cliバージョン3.0.0-beta.xを使用した新しいビルドセットアップの場合、パブリックフォルダーがあり、次のセットアップは必要ありません。 _redirectsファイルをpublicフォルダーのルートの下に置くだけです。ビルドすると、デプロイに使用されるdistフォルダーにコピーが作成されます。

3.xより前のvue-cli作成アプリ

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.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: ['.*']
  }
])
26
talves

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ファイル ここ 。

11
Rutger Willems

私は最後の行なしでラトガー・ウィレムスのスニペットを試してみましたが、うまくいきました。クレジットはハミッシュモファットに送られます。

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

vue appの/ publicディレクトリに_redirectsファイルを追加するだけです。

2
Cris Shaker