提出问题

打包部署后显示空白页，99% 都是这 4 个原因

原因一：publicPath 必须改为 ./

打开 vue.config.js 文件，没有就新建一个！

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  publicPath: './',   // ✅ 必须改成这个！！！
  outputDir: 'dist',
  assetsDir: 'static'
})

不改这个 = 100% 空白页

原因二：路由设置

Vue Router history 模式

如果用的是 Vue Router history 模式，必须加 base: ‘./‘

打开 router/index.js

const router = createRouter({
  history: createWebHistory('./'),  // ✅ 改成 ./
  routes
})

hash 模式不用改

使用 hash 模式

// 导入 createWebHashHistory
import { createRouter, createWebHashHistory } from 'vue-router'


const router = createRouter({
  // 使用 createWebHashHistory
  history: createWebHashHistory(),
  routes
})

重新打包

npm run build

把新的 dist 复制到 SpringBoot

结构：

你的项目/
  xxx.jar
  static/
    index.html
    assets/
    css/
    js/

原因三：SpringBoot 配置外部静态资源路径

spring:
  web:
    resources:
      static-locations: file:.\static\

原因四：SpringSecurity 放行（必须）

@Configuration
@EnableWebSecurity
public class SecurityConfig {
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            .authorizeHttpRequests(auth -> auth
                // 放行首页
                .requestMatchers("/", "/index.html").permitAll()
                // 放行所有静态文件
                .requestMatchers(
                "/static/**",
                "/css/**",
                "/js/**",
                "/images/**",
                "/assets/**", // 放行vue打包的目录
                "/favicon.ico"
                )
                .permitAll()
                .anyRequest().authenticated()
            )
            .csrf(csrf -> csrf.disable());
        return http.build();
    }
}