本文主要是介绍使用vuecli开发的项目不想配前后台分离、不想配nginx咋办?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
使用vuecli开发的项目不想配前后台分离、不想配nginx咋办?
vue是一个单页面框架,直接使用html引入vue文件的方法开发太费事,但使用使用vuecli编写的项目打包后又要配置nginx,如果不想配置nginx,不想实现前后台分离,就想一个项目直接跑起来,该咋办?方法如下:
1.把vuecli编译的文件夹dist复制到下图目录处:
2. 配置方法
在WebMvcConfigurationSupport的配置类中,配置如下即可:
@Configuration
public class WebConfig extends WebMvcConfigurationSupport {/*** 视图控制器配置** @param registry*/@Overrideprotected void addViewControllers(ViewControllerRegistry registry) {registry.addViewController("/").setViewName("../dist/index");//默认视图跳转,打开dist/index.html}/*** 静态资源配置* * @param registry*/@Overrideprotected void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/mapper/**").addResourceLocations("classpath:/mapper/");//配置静态资源映射,将css请求映射到/dist/css/目录下registry.addResourceHandler("/css/**").addResourceLocations("classpath:/dist/css/");//配置静态资源映射,将js请求映射到/dist/js/目录下registry.addResourceHandler("/js/**").addResourceLocations("classpath:/dist/js/");registry.addResourceHandler("/fonts/**").addResourceLocations("classpath:/dist/fonts/");registry.addResourceHandler("/img/**").addResourceLocations("classpath:/dist/img/");}
3,在maven中添加thymeleaf依赖
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
这篇关于使用vuecli开发的项目不想配前后台分离、不想配nginx咋办?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!