vue打包整合到spring boot

对于小型项目没有必要左前后端分离，但又不想暴露前端代码，则需把vue打包后的代码整合到springboot

环境：

• JDK1.8
• springboot 2.3.4.RELEASE
• vue 2.6.11、vue-router 3.2.0、vue-cli 4.2.2

properties

server.port=8088

spring.resources.static-locations=classpath:public/,classpath:static/,file:public/,file:static/

vue.config.js

//注意要用绝对路径
publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
    
outputDir: 'dist',
    
assetsDir: '',

前端编译打包之后直接将dist包下的的文件复制到springboot resources/static目录下

创建过滤器

@Order(1)
@WebFilter(urlPatterns = {"/*"}, filterName = "routerFilter")
public class RouterFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        String servletPath = request.getServletPath();
        String context = request.getContextPath();
        //静态资源和接口一律放行
        if (servletPath.matches("^.*(.js|.css|.font|.svg|.woff|.ttf|.ico)$") || servletPath.startsWith("/v1")) {
            chain.doFilter(req, resp);
        } else {//路由地址一律转发到index.html页面
            req.getRequestDispatcher(context + "/index.html").forward(req, resp);
        }
    }

}

如果vue配置了基础路由

export default new VueRouter({
    mode: 'history',
    base: '/ui',
    routes
})

那么过滤器的判断可以简写成：

//路由地址一律转发到index.html页面
if (servletPath.startsWith("/ui")) {
    req.getRequestDispatcher(context + "/index.html").forward(req, resp);
} else {
    chain.doFilter(req, resp);
}

另外需要在启动类加@ServletComponentScan注解扫描到@WebFliter标记的过滤器

最后列几个打包编译、并复制编译后的文件到java项目中的插件，不做详细介绍

<plugin>
    <artifactId>maven-clean-plugin</artifactId>
    <version>3.1.0</version>
    <configuration>
        <failOnError>false</failOnError>
        <filesets>
            <fileset>
                <directory>${basedir}/src/main/resources/</directory>
                <includes>
                    <include>static/css/</include>
                    <include>static/js/</include>
                    <include>static/fonts/</include>
                    <include>public/index.html/</include>
                </includes>
                <followSymlinks>false</followSymlinks>
            </fileset>
        </filesets>
    </configuration>
</plugin>
<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <configuration>
        <encoding>${project.build.sourceEncoding}</encoding>
    </configuration>
    <executions>
        <execution>
            <id>copy-static</id>
            <phase>validate</phase>
            <goals>
                <goal>copy-resources</goal>
            </goals>
            <configuration>
                <encoding>utf-8</encoding>
                <outputDirectory>${basedir}/src/main/resources/static</outputDirectory>
                <resources>
                    <resource>
                        <directory>D:/webstorm/generator/dist</directory>
                        <excludes>
                            <exclude>index.html</exclude>
                        </excludes>
                    </resource>
                </resources>
            </configuration>
        </execution>
        <execution>
            <id>copy-index</id>
            <phase>validate</phase>
            <goals>
                <goal>copy-resources</goal>
            </goals>
            <configuration>
                <encoding>utf-8</encoding>
                <outputDirectory>${basedir}/src/main/resources/public</outputDirectory>
                <resources>
                    <resource>
                        <directory>D:/webstorm/generator/dist</directory>
                        <includes>
                            <include>index.html</include>
                        </includes>
                    </resource>
                </resources>
            </configuration>
        </execution>
    </executions>
</plugin>
<plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>exec-maven-plugin</artifactId>
    <version>1.6.0</version>
    <executions>
        <execution>
            <id>exec-npm-run-build</id>
            <phase>compile</phase>
            <goals>
                <goal>exec</goal>
            </goals>
            <configuration>
                <executable>npm</executable>
                <arguments>
                    <argument>run</argument>
                    <argument>build</argument>
                </arguments>
                <workingDirectory>D:/webstorm/generator</workingDirectory>
            </configuration>
        </execution>
    </executions>
</plugin>

如果觉得对你有所帮助，请动动发财的手点个赞吧！