web-dev-qa-db-fra.com

Ajouter le fichier _redirects au chemin racine de Vue SPA hébergé sur Netlify

Je développe une application à page unique à l'aide de Vue CLI et souhaite que l'historique fonctionne avec Pushstate afin d'obtenir des URL propres.

Je dois suivre ceci: https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps et ajouter un fichier _redirects à la racine du dossier de mon site avec le Suivant:

/*    /index.html   200

Le problème est que je ne sais pas comment ajouter ce fichier _redirects à la racine de mon dossier dist. J'ai essayé de l'ajouter au dossier statique mais cela finit dans un sous-dossier et non dans la racine. Comment puis-je inclure ce fichier pour que le mode historique fonctionne après le déploiement sur Netlify?

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

vue-cli crée l'application 3.x

Pour la nouvelle configuration de construction utilisant la version 3.0.0-beta.x de Vue-cli, il existe maintenant un dossier public et vous n'avez pas besoin de la configuration suivante. Il suffit de placer votre fichier _redirects sous la racine du dossier public. Lorsque vous construisez, il en fera une copie dans le dossier dist qui sera utilisé pour votre déploiement.

vue-cli crée une application antérieure à 3.x

Vue.js utilise webpack pour copier les actifs statiques. Ceci est maintenu dans webpack.prod.conf.js pour la version de production, ce dont vous aurez besoin dans ce cas pour Netlify. Je crois que la configuration la meilleure et la plus propre est basée sur cette solution.

Recherchez dans le fichier le new CopyWebpackPlugin dans webpack.prod.conf.js.

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

Créez une racine (dossier dans votre projet au même niveau du dossier statique) Vous pouvez nommer cela comme vous voulez, mais je vais utiliser root pour l'exemple.

Vous devez ensuite vous assurer que le fichier _redirects se trouve dans le nouveau répertoire root ou quel que soit votre nom. Dans ce cas, il s'appelle root

Modifiez maintenant la section webpack.prod.conf.js CopyWebpackPlugin afin qu'elle ressemble à ce qui suit:

// 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

Vous pouvez également simplement utiliser le fichier netlify.toml qui a tendance à être un peu plus propre. Il suffit de mettre ceci dans le fichier pour obtenir la redirection que vous cherchiez:

# 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

Vous pouvez trouver plus d’informations sur le fichier netlify.tomlici .

6
Rutger Willems

J'ai essayé l'extrait de Rutger Willems sans la dernière ligne et ça marche. Le mérite en revient à Hamish Moffatt.

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

Vous pouvez simplement ajouter le fichier _redirects à votre répertoire/public dans votre application vue

0
Cris Shaker