Springboot+Vue前后端分离开发--合并打包（无跨域）

最新推荐文章于 2025-10-15 14:38:36 发布

原创

最新推荐文章于 2025-10-15 14:38:36 发布 · 5.3k 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#java #springboot #vue.js

碎碎念：最近参与导师一个基于spring boot+vue2的前后端分离项目，因为本人项目经验欠缺，打包部署时遇到各种跨域问题，请教学长花了好长时间才把项目部署到服务器.......经过这次艰难的部署过程，老师又对我说：这样前后端分离好像对我们没什么好处，部署还存在各种跨域问题，你能不能想办法给它改成不分离项目？于是经过查阅各种博客经验总结以及个人能力范围内，我只好按照开发分离、部署不分离的方法解决，spring boot整合vue静态资源打成一个jar包，无跨域请求即可快速部署，且有利于后续的开发和维护工作。

第一步：前端项目打包

1、vue.config.js配置

let proxyObj = {};
const CompressionPlugin = require("compression-webpack-plugin");
proxyObj['/ws'] = {
    ws: true,
    target: "ws://localhost:8081"
};
proxyObj['/'] = {
    ws: false,
    target: 'http://localhost:8081',
    changeOrigin: true,
    pathRewrite: {
        '^/': ''
    }
}
module.exports = {
    productionSourceMap: false,
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: proxyObj
    },
    
}

这里很多博客说要修改vue.config.js文件里的publicPath修改为publicPath: './'，可能是大家的代码结构不同这里给我带来很多麻烦（尝试了很多次后端就是访问不到静态资源，哭晕在厕所），我这里前端不需要修改任何配置，按前后端分离开发时的打包配置就好。

2、运行npm run build,生成