Vue项目打包成静态文件放到springboot项目下

一、Vue这边准备工作如下

1. 将Vue 模式修改为web模式

const router = createRouter({
  // hash:  createWebHashHistory(), // 设置为哈希模式
  // 设置为web模式
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    ...redirect, // 统一的重定向配置
    ...login,
    ...lock,
    ...fixedRoutes,
    ...error,
  ],

2.请求的url地址修改为本地后端服务器地址

const service = axios.create({
  //location对象
  // baseURL: location.pathname.split('/')[1]==='tools'? import.meta.env.VITE_TOOLS_URL:import.meta.env.VITE_API_URL,
  // baseURL:import.meta.env.VITE_TOOLS_URL,
  // 请求路径
  baseURL: 'http://localhost:8083',
  timeout: 10000,
  withCredentials: true,
})

3. 打包成静态文件

npm run build

二、springboot 项目中做的事情

1. 一般将静态文件放到resources目录下static目录下
   
2. pom.xml 中打包的时候，将静态文件打包进入

            <!--指定将resources中配置文件加载到target-->
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.xml</include>
                    <include>**/*.db</include>
                    <include>static/**</include>
                    <include>static/assets/**</include>
                </includes>
                <filtering>false</filtering>

            </resource>

3. 编写一个 WebMvcConfig 类

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    /**
     * 拦截器，拦截所有请求，也可以拦截指定请求，多用于登录拦截，是否鉴权
     *
     * @param registry
     */
    @Override
    public void addInterceptors(InterceptorRegistry registry) {

        registry.addInterceptor(new LoginInterceptor())
                .addPathPatterns("/**")
                .excludePathPatterns("/swagger**/**")
                .excludePathPatterns("/webjars/**")
                .excludePathPatterns("/v3/**")
                .excludePathPatterns("/doc.html")
                .excludePathPatterns("/user/*");
    }

    /**
     * 静态资源拦截
     *
     * @param registry
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

        //放行所有的静态资源，为了保证vue项目可以正常使用
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/static/");
    }


    /**
     * 解决全局跨域，
     *
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 添加映射路径
        registry.addMapping("/**")
                // 放行哪些原始域
                .allowedOriginPatterns("*")
                // 是否发送Cookie信息
                .allowCredentials(true)
                // 放行哪些原始域(请求方式)
                .allowedMethods("*")
                // 放行哪些原始域(头部信息)
                .allowedHeaders("*")
                // 暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
                .exposedHeaders("access-control-allow-headers",
                        "access-control-allow-methods",
                        "access-control-allow-origin",
                        "access-control-max-age",
                        "X-Frame-Options");
    }

}

4. 编写一个 webcontroller 将请求转到index.html

@Controller
public class WebController {

    @GetMapping("/{path:[^\\.]*}") // 匹配任何没有点的请求 (避免静态资源被拦截)
    public String forward() {
        // 转发到 index.html
        return "forward:/index.html";
    }

}

5. 将项目mvn打包jar，打包之后，直接输入网站，就可以访问到地址了
   一定要记住，要先打包，打包之后，静态文件才能进入到jar包中，访问才能访问到静态资源