技术收藏-开发篇

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配置开发时的代理和端口

上一篇下一篇

猜你喜欢

热点阅读