无法在Spring Boot中运行VueJS单页应用问题求助

嘿，这个问题我之前也踩过坑，大概率是Spring Boot的静态资源版本化解析机制在搞鬼，咱们一步步来拆解原因和解决办法：

核心原因：Spring Boot对带哈希的静态资源的特殊处理 #

Spring Boot默认启用了版本化资源解析（Resource Versioning），它会自动识别文件名中带有.[哈希值].格式的文件（比如你的app.8dfb1913ee552ff55ff81ea142c3f782.css），并认为这是带版本号的资源。

它的逻辑是：尝试去掉哈希部分，去查找原始文件名（比如app.css），但你的Vue打包后只有带哈希的文件，没有原始文件名的文件，所以就返回404了。而你改了哈希里的一个字符后，Spring不再把它识别为版本化资源，就会直接按原路径查找，自然就找到了。

解决办法 #

方法一：自定义Spring Boot的资源解析规则（推荐） #

创建一个WebMvc配置类，调整资源解析策略，让它正确识别Vue打包的哈希格式：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.resource.VersionResourceResolver;

@Configuration
public class StaticResourceConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/static/")
                .resourceChain(true)
                .addResolver(new VersionResourceResolver()
                        // 匹配Vue打包的哈希格式：文件名.哈希.后缀
                        .addContentVersionStrategy("/**/*.js", "/**/*.css", "/**/*.jpg", "/**/*.svg", "/**/*.woff2", "/**/*.eot", "/**/*.ttf", "/**/*.woff"));
    }
}

如果嫌麻烦，也可以直接关闭版本化解析（不影响生产缓存，因为Vue的哈希已经足够做缓存更新）：

registry.addResourceHandler("/**")
        .addResourceLocations("classpath:/static/")
        .resourceChain(false);

方法二：调整Vue打包的文件名格式 #

修改Vue的打包配置，让哈希位置不触发Spring的版本识别。比如在vue.config.js中：

module.exports = {
  configureWebpack: {
    output: {
      // 把哈希放在文件名前面，避免Spring误判为版本号
      filename: 'static/js/[contenthash:8].[name].js',
      chunkFilename: 'static/js/[contenthash:8].[name].js'
    }
  },
  css: {
    extract: {
      filename: 'static/css/[contenthash:8].[name].css',
      chunkFilename: 'static/css/[contenthash:8].[name].css'
    }
  }
};

不过这个方法需要重新打包Vue项目，不如第一种方法直接。

方法三：快速验证（临时方案） #

如果只是想快速验证，可以把Vue打包后的index.html里的资源引用路径，手动加上/static/前缀（比如把static/css/xxx.css改成/static/css/xxx.css），确保请求路径正确指向Spring Boot的静态资源目录。

额外检查点 #

• 确认所有Vue打包文件都放在src/main/resources/static/目录下，结构和打包输出一致（比如static/css/、static/js/等子目录都要完整复制）。
• 打开浏览器开发者工具的Network面板，查看资源的请求路径，对比static目录下的实际文件路径，确认是否有路径拼写错误。

内容的提问来源于stack exchange，提问作者kojot