vue3编译打包发布+springboot3工程打包，显示空白页-马育民老师

# 提出问题

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

# 原因一：publicPath 必须改为 ./
打开 `vue.config.js` 文件，**没有就新建一个！**

```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`
```js
const router = createRouter({
  history: createWebHistory('./'),  // ✅ 改成 ./
  routes
})
```

### hash 模式不用改

使用 hash 模式

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

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

# 重新打包

```bash
npm run build
```

---

### 把新的 dist 复制到 SpringBoot
结构：
```
你的项目/
  xxx.jar
  static/
    index.html
    assets/
    css/
    js/
```

---

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

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

---

# 原因四：SpringSecurity 放行（必须）

```java
@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();
    }
}
```

原文出处：https://malaoshi.top/show_1GW370yu64kM.html