Springboot + vue 项目整合部署
2019-11-07 本文已影响0人
田文健
下面介绍在需要vue和Springboot同一个包部署的情况下需要做的一些配置。vue的开发目录放到resources目录下的static中,方便开发。
maven的配置:
maven需要配置resources来排除不需要打包的文件,
<resources>
<resource>
<directory>src/main/resources</directory>
<filtering>true</filtering>
<includes>
<include>resources/**</include>
<include>static/web/dist/**</include>
<include>application.properties</include>
<include>application-${profileActive}.properties</include>
<include>logback-spring.xml</include>
</includes>
<excludes>
<exclude>static/web/node_modules/**</exclude>
<exclude>static/web/public/**</exclude>
<exclude>static/web/package.json</exclude>
<exclude>**/*.woff</exclude>
<exclude>**/*.woff2</exclude>
<exclude>**/*.ttf</exclude>
<exclude>**/*.ico</exclude>
</excludes>
</resource>
<resource>
<directory>src/main/resources</directory>
<filtering>false</filtering>
<includes>
<include>static/web/dist/**/*.woff</include>
<include>static/web/dist/**/*.woff2</include>
<include>static/web/dist/**/*.ttf</include>
<include>static/web/dist/favicon.ico</include>
</includes>
</resource>
</resources>
字体文件和ico文件需要排除再没有过滤器的方式导入,否则文件会发生错误。
Springboot的配置:
Springboot需要注意的是如果设置了context-path时的路径问题。另外再加上重定向到vue首页;
@GetMapping("/")
public ModelAndView index(ModelAndView mv){
mv.setViewName("redirect:/web/dist/index.html");
return mv;
}
vue的配置:
开发时配置代理到boot。路由建议用hash模式。
再vue cli3搭建的项目中,添加vue.config.js
// vue.config.js
module.exports = {
// options...
publicPath: "/web/dist",
devServer: {
port: 7996,
proxy: 'http://localhost:8086',
},
css: {
loaderOptions:{
scss:{
}
}
}
};
publicPath为项目要部署的目录,devServer配置开发时的代理和端口