Обмен технологиями

Интегрируйте проект vue в проект Springboot и запустите его в облаке Alibaba.

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Первый шаг — использовать шаблонизатор тимелеафа в Springboot.

Импортировать зависимости

  1. <!-- thymeleaf 模板 -->
  2. <dependency>
  3. <groupId>org.springframework.boot</groupId>
  4. <artifactId>spring-boot-starter-thymeleaf</artifactId>
  5. </dependency>

Создайте статические папки и папки шаблонов в каталоге ресурсов.

Настройте тимелеаф в yml

  1. spring:
  2. # 模板引擎
  3. thymeleaf:
  4. mode: HTML5
  5. encoding: utf-8
  6. # 禁用缓存
  7. cache: false

Включите доступ к статическим файлам в конфигурации

  1. public class ResourceConfig implements WebMvcConfigurer {
  2. @Override
  3. public void addResourceHandlers(ResourceHandlerRegistry registry) {
  4. registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");
  5. }
  6. }

Упакуйте проект vue

npm run build

Поместите упакованные статические файлы в папку static и поместите index.html в папку шаблонов.

Запись маршрутизации в контроллере

Пусть он перейдет на страницу index.html.

  1. @Controller
  2. @CrossOrigin
  3. public class IndexController {
  4. @GetMapping("/")
  5. public String index(){
  6. return "index";
  7. }
  8. }

Запустить проект

Войдите в порт и получите к нему доступ!