Example of using vue.config.js

Premise

When developing web services and web applications using the SPA framework on the front-end side, I think that it will be created by combining it with popular back-end languages and back-end frameworks such as Ruby on Rails and Laravel these days. This is because Vue and React are implemented in advance in the backend environment as plug-ins during initial development, making it easier to introduce.

In this project, we developed using Java and separated the directories, so we would appreciate it if you could call it as an article for such a project.

Login function

As you can see in the approximate web service, the project we developed this time also had a login function. Java is responsible for the login screen and login process. View uses the Java template engine Thymeleaf.

After logging in, the specified token and cookie are retained on the browser side and fibered to the dashboard. The screens and processes beyond the dashboard are the responsibility of the SPA.

Challenges in the development environment

As mentioned above, this project started with the Java side and the directory separated. In other words, the command to start each development environment and the host were separated in the following state. Java --Project start --Access localhost: 8080 Vue.js --Start $ yarn serve --Access localhost: 8888

For this reason, it was not easy to confirm the API combination locally, such as the fiber from the login screen and the redirect process when the login evaluation was negative.

solution

I was able to solve it by describing it in the proxy of 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'
      }
    }
  },
}

Summary

There may not be many scenes like this one, but if there are similar scenes, please refer to them. If you know of any other good solutions, please let us know in the comments.