vue3编译打包发布+springboot3工程打包,显示空白页 作者:马育民 • 2026-04-11 15:37 • 阅读:10002 # 提出问题 打包部署后显示空白页,**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(); } } ``` 原文出处:http://malaoshi.top/show_1GW370yu64kM.html