一般vue工程会单独部署到nginx服务器上,但是也有些会跟后端服务一起打包部署,这里简单介绍一种方法。
首先在已有的项目中添加静态资源映射:
@Configuration
public class MvcConfig extends WebMvcConfigurationSupport {
@Autowired
private ConfigProperties configProperties;
@Override
protected void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX + "/static/");
super.addResourceHandlers(registry);
}
}
然后再resources目录创建static目录,将vue打包后的dist目录下的所有文件copy到static下即可。
启动项目访问:http://ip:port/static/index.html
当然这么做有一点不方便,前端修改代码后端也需要重新打包,所以我们可以映射到项目外
@Configuration
public class MvcConfig extends WebMvcConfigurationSupport {
@Autowired
private ConfigProperties configProperties;
@Override
protected void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX + "/static/");
registry.addResourceHandler(configProperties.getPath()).addResourceLocations("file:" + configProperties.getResourceLocations());
super.addResourceHandlers(registry);
}
}
我们将资源路径做成可配置:
@Configuration
@ConfigurationProperties(prefix = "view")
@Data
public class ConfigProperties {
private String path;
private String resourceLocations;
}
配置文件:
server:
port: 8080
spring:
application:
name: test
profiles:
active: dev
view:
path: /demo/**
# D:/work/dist/
resourceLocations: D:/work/dist/
这样就实现可配置部署vue工程,将vue打包好的dist目录路径配置到resourceLocations,访问路径配置到path
按照上面配置,启动项目访问:http://ip:port/demo/index.html