Compartir tecnología

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

El primer paso es utilizar el motor de plantillas thymeleaf en springboot

Importar dependencias

        <!-- thymeleaf 模板 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

Cree carpetas estáticas y carpetas de plantillas en el directorio de recursos

Configurar thymeleaf en yml

spring:
  # 模板引擎
  thymeleaf:
    mode: HTML5
    encoding: utf-8
    # 禁用缓存
    cache: false

Habilitar el acceso a archivos estáticos en la configuración.

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

Empaquetar el proyecto vue

npm run build

Coloque los archivos estáticos empaquetados en la carpeta estática y coloque index.html en la carpeta de plantillas.

Escribir enrutamiento en el controlador

Déjalo saltar a la página index.html.

@Controller
@CrossOrigin
public class IndexController {
    @GetMapping("/")
    public String index(){
        return "index";
    }
}

ejecutar el proyecto

¡Entra al puerto y accede a él!