[JAVA] Exemple d'utilisation de vue.config.js

supposition

Lors du développement de services Web et d'applications Web à l'aide du framework SPA sur le front-end, je pense qu'il sera créé en le combinant avec des langages back-end et des frameworks back-end populaires tels que Ruby on Rails et Laravel ces jours-ci. En effet, Vue et React sont implémentés à l'avance dans l'environnement back-end en tant que plug-ins lors du développement initial, ce qui facilite leur introduction.

Dans ce projet, nous avons utilisé Java et l'avons développé avec des répertoires séparés, nous espérons donc que vous pourrez l'appeler un article pour un tel projet.

Fonction de connexion

Comme vous pouvez le voir dans le service Web approximatif, le projet que nous avons développé cette fois avait également une fonction de connexion. La responsabilité de l'écran de connexion et du processus de connexion est du côté Java. View utilise le moteur de modèle Java Thymeleaf.

Une fois connecté, le jeton et le cookie spécifiés sont conservés du côté du navigateur et intégrés au tableau de bord. Les écrans et processus au-delà du tableau de bord sont sous la responsabilité du SPA.

Défis dans l'environnement de développement

Comme mentionné ci-dessus, ce projet a commencé avec le côté Java et le répertoire séparé. En d'autres termes, la commande pour démarrer chaque environnement de développement et l'hôte ont été séparés dans l'état suivant. Java

• Début du projet --Accès localhost: 8080 Vue.js --Démarrer $ yarn serve --Accès localhost: 8888

Pour cette raison, il n'a pas été facile de confirmer la liaison des API localement, comme la fibre à partir de l'écran de connexion et le traitement de redirection lorsque l'évaluation de la connexion était négative.

Solution

Il a été résolu en le décrivant dans le proxy de vue.config.js.

module.exports = {
  devServer: {
    port: 8888,
    disableHostCheck: true,
    host: 'localhost',
    proxy: {
      '/api': {
        target: 'http://localhost:8080'
      },
      '/top': {
        target: 'http://localhost:8080'
      },
      '/login': {
        target: 'http://localhost:8080'
      }
    }
  },
}

Résumé

Il se peut qu'il n'y ait pas beaucoup de scènes comme celle-ci, mais s'il y a des scènes similaires, veuillez vous y référer. Si vous connaissez d'autres bonnes solutions, veuillez nous en informer dans les commentaires.