Laravel France

Optimiser environnement du dev frontend/vuejs

Avatar de bArraxasArraxas
bArraxasArraxas

Bonjour à tous,

La commande "npm run watch" est plutôt pas mal mais absolument pas adaptée au développement d'une SPA (single page application) vuejs, pour ces raisons :

  • Rechargement intégral de l'application à chaque modification de fichier : js, vue ou php.
  • Rechargement à chaud du scss mais la compilation prend 4-6 sec (sur un pc puissant et avec les vendors séparés du app.scss)

Outre les rechargements inutiles, on ne profite aucunement du rechargement à chaud proposé par VueCli (vue-cli-service serve).

Autant dire que le developpement dans ces conditions est un vrai calvert.

Alors il existe une solution mais qui ne fonctionne absolument pas à savoir :

  • créer un dossier "frontend" à la racine du projet laravel et y déposer notre SPA VueJs
  • dans le dossier frontend y créer également un fichier vue.config.js

Dans le fichier vue.config.js :

 module.exports = {
  // proxy API requests to Valet during development
  devServer: {
    proxy: 'http://localhost' // ou 'http://localhost/3000' si vous utilisez "npm run watch" mais ce n'est pas utile dans le cadre d'une SPA
  },

  // output built static files to Laravel's public dir.
  // note the "build" script in package.json needs to be modified as well.
  outputDir: '../public',

  // modify the location of the generated HTML file.
  // make sure to do this only in production.
  indexPath: process.env.NODE_ENV === 'production'
    ? '../resources/views/app.blade.php'
    : 'index.html'
}

Malheureusement cette solution ne fonctionne pas malgré de nombreuses variantes de tentées.

Est-ce qu'une bonne âme peut me venir en aide ?

Un grand merci,

Bonne journée,

Posté il y a 9 mois

Vous ne pouvez pas répondre à ce sujet.