作为一名长期在Java生态摸爬滚打的Spring Boot开发者，我太懂你这种“不想为前端额外搭一套工具链”的执念了——Maven/Gradle已经把依赖和构建管得明明白白，再搞Node/NPM确实是额外的维护负担。刚好我之前也折腾过类似的方案，完全基于Spring Boot生态就能实现Vue SPA，不用碰任何Node相关工具，给你详细拆解一下：

我们的核心逻辑是把Vue当作普通静态资源引入，不用本地构建；用Spring Boot处理SPA路由 fallback、后端API；用Gradle/Maven的Java生态插件完成资源压缩优化，全程不涉及Node/NPM/Vue CLI。

1. 直接通过CDN引入Vue核心依赖 #

不用npm安装，直接在你的入口HTML（比如src/main/resources/static/index.html）里引入Vue和Vue Router的CDN链接，稳定版本可以指定具体号：

<!-- 引入Vue核心 -->
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<!-- 引入Vue Router -->
<script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>
<!-- 如果需要HTTP请求，再加Axios的CDN -->
<script src="https://unpkg.com/axios@0.27.2/dist/axios.min.js"></script>

生产环境可以换成.min.js版本，减少加载体积。

2. 组件拆分：彻底分离视图与逻辑（避开单文件组件） #

你反感单文件组件混淆视图与逻辑？没问题，我们把组件拆成独立的文件：

• 模板部分：在HTML里用<template>标签定义，给个唯一ID，比如src/main/resources/static/templates/HelloWorld.html：

<template id="hello-world-template">
  <div class="hello">
    <h1>{{ greeting }}</h1>
    <button @click="fetchApiData">调用后端API</button>
    <p>{{ apiResponse }}</p>
  </div>
</template>

• 逻辑部分：写在独立的JS文件里，比如src/main/resources/static/js/components/HelloWorld.js：

Vue.component('hello-world', {
  data() {
    return {
      greeting: 'Hello from Vue Component!',
      apiResponse: ''
    }
  },
  methods: {
    fetchApiData() {
      axios.get('/api/hello')
        .then(res => this.apiResponse = res.data)
        .catch(err => console.error(err))
    }
  },
  template: '#hello-world-template'
})

然后在入口HTML里按顺序引入这些文件：

<!-- 先引入模板 -->
<script src="/templates/HelloWorld.html"></script>
<!-- 再引入组件逻辑 -->
<script src="/js/components/HelloWorld.js"></script>
<!-- 最后引入路由和Vue实例 -->
<script src="/js/app.js"></script>

3. 配置Spring Boot的SPA路由Fallback #

SPA需要把所有非静态资源的请求转发到index.html，让Vue Router处理前端路由。写个简单的配置类：

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

@Configuration
public class SpaWebConfig implements WebMvcConfigurer {

    // 处理SPA路由 fallback：所有非后缀的请求都转发到index.html
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/{path:[^\\.]*}")
                .setViewName("forward:/index.html");
    }

    // 配置静态资源路径
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/static/");
    }
}

4. 用Gradle/Maven做资源压缩优化（纯Java工具） #

虽然不用Node，但我们可以用Java生态的插件完成JS/CSS/HTML的压缩，完全融入现有构建流程：

Gradle方案 #

用Closure Compiler（纯Java实现的JS压缩器）和minify-html插件：

plugins {
    id 'org.springframework.boot' version '2.7.14'
    id 'io.spring.dependency-management' version '1.0.15.RELEASE'
    id 'java'
    // 用于压缩HTML
    id 'com.github.minify-html.minify-html' version '0.11.0'
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-web'
    // 引入Closure Compiler用于JS压缩
    implementation 'com.google.javascript:closure-compiler:v20230508'
}

// 压缩HTML，同时自动压缩内嵌的JS/CSS
minifyHtml {
    sourceSets = [sourceSets.main]
    include '**/*.html'
    options {
        minifyCss = true
        minifyJs = true
        removeComments = true
    }
}

// 自定义任务压缩独立JS文件
task compressJs(type: JavaExec) {
    mainClass = 'com.google.javascript.jscomp.CommandLineRunner'
    classpath = sourceSets.main.runtimeClasspath
    args = [
        '--js', 'src/main/resources/static/js/**/*.js',
        '--js_output_file', 'build/resources/main/static/js/app.min.js',
        '--compilation_level', 'SIMPLE' // 可选：ADVANCED_OPTIMIZATIONS压缩率更高但需要注意代码兼容性
    ]
}

// 让资源处理依赖JS压缩任务
processResources.dependsOn(compressJs)

Maven方案 #

用minify-maven-plugin，同样基于纯Java压缩工具：

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
        <!-- 资源压缩插件 -->
        <plugin>
            <groupId>com.samaxes.maven</groupId>
            <artifactId>minify-maven-plugin</artifactId>
            <version>1.7.6</version>
            <executions>
                <execution>
                    <phase>process-resources</phase>
                    <goals>
                        <goal>minify</goal>
                    </goals>
                </execution>
            </executions>
            <configuration>
                <!-- JS压缩配置 -->
                <jsSourceDir>src/main/resources/static/js</jsSourceDir>
                <jsTargetDir>target/classes/static/js</jsTargetDir>
                <jsCompressor>closure</jsCompressor>
                <!-- CSS压缩配置 -->
                <cssSourceDir>src/main/resources/static/css</cssSourceDir>
                <cssTargetDir>target/classes/static/css</cssTargetDir>
                <cssCompressor>yui</cssCompressor>
                <!-- HTML压缩配置 -->
                <htmlSourceDir>src/main/resources/static</htmlSourceDir>
                <htmlTargetDir>target/classes/static</htmlTargetDir>
                <htmlCompressor>htmlcompressor</htmlCompressor>
            </configuration>
            <dependencies>
                <dependency>
                    <groupId>com.google.javascript</groupId>
                    <artifactId>closure-compiler</artifactId>
                    <version>v20230508</version>
                </dependency>
            </dependencies>
        </plugin>
    </plugins>
</build>

5. 整合前端路由与后端API #

前端用Vue Router管理页面路由，后端API统一放在/api/**路径下，避免冲突：

• 前端路由配置（src/main/resources/static/js/app.js）：

// 定义页面组件
const Home = { template: '<div>首页</div>' }
const About = { template: '<div>关于我们</div>' }

// 配置路由
const router = new VueRouter({
  mode: 'history', // 去掉#号，需要Spring Boot的fallback配置支持
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/hello', component: () => import('/js/components/HelloWorld.js') } // 可选：懒加载组件
  ]
})

// 创建Vue实例
new Vue({
  router,
  el: '#app'
})

• 后端API示例：

@RestController
@RequestMapping("/api")
public class ApiController {

    @GetMapping("/hello")
    public String getHelloMessage() {
        return "Hello from Spring Boot Backend!";
    }
}

• Thymeleaf：如果需要在HTML中插入服务器端变量（比如当前用户信息、系统配置），可以把入口HTML改成Thymeleaf模板，放在src/main/resources/templates/index.html，这样既能保留Vue的前端特性，又能利用Spring的服务器端渲染能力，完全不用Node。
• Spring Boot DevTools：开启后，修改前端JS/HTML文件会自动触发浏览器刷新，开发效率拉满，不用手动重启Spring Boot。
• Closure Compiler：前面提到的纯Java JS压缩工具，压缩率不输Webpack，完全融入Gradle/Maven流程。

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