wake-up-neo.com

Fügen Sie die _redirects-Datei zum Stammpfad für auf Netlify gehostetes Vue SPA hinzu

Ich entwickle eine Single-Page-App mit Vue-CLI und möchte, dass der Verlaufs-Pushstate funktioniert, damit ich saubere URLs bekomme.

Ich muss diesem folgen: https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps und füge eine _redirects-Datei zum Stammverzeichnis meines Websiteordners mit der hinzu folgende:

/*    /index.html   200

Das Problem ist, dass ich nicht weiß, wie ich diese _redirects-Datei in das Stammverzeichnis meines dist-Ordners einfügt. Ich habe versucht, es dem statischen Ordner hinzuzufügen, aber es endet in einem Unterordner und nicht im Stammverzeichnis. Wie kann ich diese Datei einschließen, damit der Historienmodus nach der Bereitstellung auf Netlify funktioniert?

// config/index.js
build: {
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
vue.jssingle-page-applicationvue-clinetlify
8
Alex

vue-cli erstellte App 3.x

Für das neue Build-Setup unter Verwendung der vue-cli-Version 3.0.0-beta.x gibt es jetzt einen öffentlichen Ordner, und Sie benötigen das folgende Setup nicht. Legen Sie einfach Ihre _redirects-Datei unter dem public-Ordnerstamm ab. Beim Erstellen wird eine Kopie in den dist-Ordner erstellt, der für Ihre Bereitstellung verwendet wird.

vue-cli hat eine App vor 3.x erstellt

Vue.js verwendet Webpack zum Kopieren der statischen Assets. Dies wird in webpack.prod.conf.js für den Produktions-Build beibehalten, den Sie in diesem Fall für Netlify benötigen. Ich glaube, die beste und sauberste Konfiguration ist basierend auf dieser Lösung.

Durchsuchen Sie die Datei nach dem new CopyWebpackPlugin in webpack.prod.conf.js.

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

Erstellen Sie ein Stammverzeichnis (Ordner in Ihrem Projekt auf derselben Ebene wie der statische Ordner) Sie können diesen Namen beliebig benennen, aber ich werde root für das Beispiel verwenden.

Sie würden dann sicherstellen, dass sich die _redirects-Datei im neuen root-Verzeichnis befindet oder wie auch immer Sie es aufgerufen haben. In diesem Fall heißt es root

Ändern Sie nun den Abschnitt webpack.prod.conf.js CopyWebpackPlugin so, dass er wie folgt aussieht:

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

Sie können auch einfach die netlify.toml-Datei verwenden, die tendenziell etwas sauberer ist. Fügen Sie dies einfach in die Datei ein, um die gewünschte Weiterleitung zu erhalten:

# 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

Weitere Informationen zur netlify.toml-Datei hier .

6
Rutger Willems

Ich habe Rutger Willems 'Snippet ohne die letzte Zeile ausprobiert und es funktioniert. Kredit geht an Hamish Moffatt.

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

Sie können die _redirects-Datei einfach zu Ihrem/public-Verzeichnis in Ihrer vue-App hinzufügen

0
Cris Shaker