Chạy vuejs trên spring boot với maven

Được ngày mưa gió, lượn lờ trên mạng, tớ mới biết được cái plugin https://github.com/eirslett/frontend-maven-plugin cho maven, mày mò nghịch một chút rồi có cái mà lên đây viết bài :smile: :smiley: :smiley:

Đồ nghề gồm có

  • Java - version nào tùy bạn, từ 8 trở lên :stuck_out_tongue_winking_eye:
  • Maven - mình đang dùng maven 3.6.3
  • Nodejs
  • Vue cli

Đấy đại khái đồ nghề chắc vậy đủ chơi rồi :triumph: phang

1. Tạo cái project spring boot

  • Tất nhiền rồi mình làm spring boot mà :D nhớ tạo với maven nhé :stuck_out_tongue: trong file pom.xml thì có mỗi cái thư viện này thôi
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
  • Bạn có thể tạo spring project ở https://start.spring.io/ hoặc ở cái ide nào đó hỗ trợ ;) hoặc tay to thì viết từng file 1 thôi :yum:
  • Tạo cái controller

    @Controller
    public class HomeController {
    
    @RequestMapping("{?:(?:(?!api|static|\\.).)*}/**")
    public String redirectApi() {
        return "/index.html";
    }
    }
    

2. Tạo cái project vuejs

  • Đây nó như trong này thôi https://cli.vuejs.org/guide/creating-a-project.html#vue-create

    • Và đây là những lựa chọn của mình khi tạo project vue alt text
  • Đây là vị trí mình tạo project vuejs nhé, có tên frontend nằm trong src/main đó
    alt text

  • Config một chút lại ở vue.config.js như này

    module.exports = {
    devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        ws: true,
        changeOrigin: true
      }
    }
    },
    lintOnSave: false,
    outputDir: 'dist',
    assetsDir: 'static'
    }
    

    3. Config file pom.xml

  • Đầu tiên config cái phần để build cái frontend này

<plugin>
  <groupId>com.github.eirslett</groupId>
  <artifactId>frontend-maven-plugin</artifactId>
  <version>${frontend-maven-plugin.version}</version>
  <configuration>
    <!-- Đường dẫn của cái project vuejs mình vừa tạo -->
    <workingDirectory>src/main/frontend</workingDirectory>
  </configuration>
  <executions>
    <!-- Cài yarn này -->
    <execution>
      <id>install node and yarn</id>
      <goals>
        <goal>install-node-and-yarn</goal>
      </goals>
      <configuration>
        <nodeVersion>${nodejs.version}</nodeVersion>
        <yarnVersion>v1.22.4</yarnVersion>
      </configuration>
    </execution>
    <!-- Chỗ này sẽ install toàn bộ thư viện javascript của bạn -->
    <execution>
      <id>yarn install</id>
      <goals>
        <goal>yarn</goal>
      </goals>
      <phase>generate-resources</phase>
      <configuration>
        <arguments>install</arguments>
      </configuration>
    </execution>
    <!-- Chỗ này để build ra html/css/javascript --> 
    <execution>
      <id>yarn build</id>
      <goals>
        <goal>yarn</goal>
      </goals>
      <configuration>
        <arguments>build</arguments>
      </configuration>
    </execution>
  </executions>
</plugin>

  • Tiếp theo là copy cái phần frontend vừa build
<plugin>
    <artifactId>maven-resources-plugin</artifactId>
  <executions>
    <execution>
    <id>copy-frontend</id>
    <phase>generate-resources</phase>
    <goals>
        <goal>copy-resources</goal>
    </goals>
    <configuration>
      <!-- Đây mình sẽ copy bỏ vào đây -->
      <outputDirectory>target/classes/resources/</outputDirectory>
      <overwrite>true</overwrite>
      <resources>
        <resource>
          <!-- Đây sau khi frontend build nó sẽ nằm trong này, mình sẽ lấy bỏ vào cái chỗ resources bên trên -->
          <directory>src/main/frontend/dist</directory>
          <includes>
            <include>static/</include>
            <include>index.html</include>
            <include>favicon.ico</include>
          </includes>
        </resource>
      </resources>
    </configuration>
    </execution>
  </executions>
</plugin>

4. Chạy thử

*Cảm ơn các bạn đã đọc tới đây * :innocent: :innocent: :innocent:

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

hunghh.dev

8 bài viết.
7 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
7 0
Xin chào các bạn đọc, trong seri này mình dự định sẽ chia sẻ cách dùng spring security để phân quyền trong web service, cách đọc ghi một JWT, rồi t...
hunghh.dev viết 7 tháng trước
7 0
White
6 1
Restful api Rest (Representational State Transfer) hiểu nôm na nó là một kiểu kiến trúc được dùng để giao tiếp giữa các máy tính, được truyền tải...
hunghh.dev viết 6 tháng trước
6 1
White
3 0
Ở (Link) mình đã tạo một số model và tạo thử một api register, ở phần này mình sẽ hướng dẫn các bạn tạo một chuỗi JWT và khi login sẽ chả về cái ch...
hunghh.dev viết 7 tháng trước
3 0
Bài viết liên quan
White
10 1
_Có mấy chia sẻ nhỏ, mình muốn đưa ra để mọi người cùng thảo luận góp ý. Thread này không tập trung vào Technical nữa mà discuss về Coding Style & ...
Hùng Phong viết gần 2 năm trước
10 1
Male avatar
3 0
(Ảnh) Gridsome là một framework phát triển trang web hiện đại để tạo các trang web tốc độ nhanh và an toàn. Các trang HTML tĩnh được tạo ra để tạo...
Vue.vn viết 11 tháng trước
3 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
8 bài viết.
7 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!