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

碎碎念:最近参与导师一个基于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,生成的静态资源存放在dist文件夹下

 3、将dist文件下的所有文件复制到spring boot下的resources文件夹下的static目录下

     可以打开index.html文件查看一下访问路径,注意没有/static

   

 4、因为本项目使用了Spring Security,修改SecurityConfig允许访问各种类型静态资源

 @Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring().antMatchers("/css/**", "/js/**", "/static/index.html", "/img/**", "/fonts/**", "/static/favicon.ico", "/verifyCode");
        web.ignoring().antMatchers("/swagger-resources/**");
        web.ignoring().antMatchers("/v2/**");
        web.ignoring().antMatchers("/**/*.json");
        web.ignoring().antMatchers("/index.html");
        web.ignoring().antMatchers("/global/**","/static/**");
    }

 5、添加访问静态页面配置WebMvcConfig

@Configuration
public class WebMvcConfig extends WebMvcConfigurationSupport {
    @Override
    protected void addViewControllers(ViewControllerRegistry registry) {
        // TODO Auto-generated method stub
        // 注册访问 /login 转向 page-login.html 页面
        registry.addViewController("/login").setViewName("page-login.html");
        super.addViewControllers(registry);
    }

    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        // TODO Auto-generated method stub
        registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");
        super.addResourceHandlers(registry);
    }

}

6、修改application.properties添加静态资源路径

spring.mvc.static-path-pattern=/static/**
spring.web.resources.static-locations=classpath:/static

7、启动后端

 8、打开浏览器输入http://localhost:8081/index.html#/

      注意,我这里是hash模式,history模式输入http://localhost:8081/index.html/

      即可访问系统页面

参考:

Spring Security 静态资源访问_weixin_30627341的博客-CSDN博客 

后记      求助!!!!!!

接下来我想把index.html从地址栏去掉该怎么做,请各位大佬给与指导帮助~

 

  • 3
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
### 回答1: Spring Boot整合Vue分离,指的是将Vue的前端代码直接打包到Spring Boot的后端项目中,而不是将前后端分离成两个独立的项目。这种方式的优点是部署方便,不需要额外的服务器和配置,缺点是前后端耦合度高,不利于团队协作和维护。建议在开发大型项目时,采用前后端分离的方式。 ### 回答2: Spring Boot是一个开源框架,简化了Spring应用程序的初始化过程。Vue是一个流行的前端框架,用于开发交互性强的Web界面。Spring Boot和Vue都可以独立使用,但是将它们结合使用可以创建优秀的Web应用程序。在没有分离的情况下,Spring Boot和Vue的整合需要按照以下步骤进行: 1.创建一个Spring Boot项目,可以选择使用Spring Initializr或手动创建项目。该项目的Maven配置文件和依赖项应该与使用Vue的Web应用程序一致。 2.在项目中添加Vue.js,可以使用CDN链接或将Vue.js文件存储在本地文件夹中。在Spring Boot项目中,可以将Vue.js文件保存在resources/static目录中。 3.在Spring Boot项目中创建一个Controller,用于提供静态资源,例如Vue.js文件和HTML文件。通过使用@Controller和@RequestMapping注释,可以将Controller映射到服务器端点。 4.在Spring Boot项目中创建index.html文件,该文件应包含Vue.js组件。将Vue.js实例化代码放置在此文件中。这将允许Vue.js应用程序与Spring Boot应用程序进行交互。 5.启动Spring Boot应用程序。在此之后,可以通过访问http://localhost:8080/index.html来查看Vue.js应用程序。 虽然这种方法可能比分离的方法更简单,但它违反了前后端分离的理念。因此,对于大型项目而言,最好使用Vue.js和Spring Boot的分离方式,这使得前后端代码和资源管理变得更加清晰。 ### 回答3: Spring Boot与Vue.js是两个非常流行的开源框架。Spring Boot是一个用于开发Java应用程序的框架,它便于开发开发和部署独立的、生产级别的Spring应用程序。Vue.js是一个用于构建用户界面的JavaScript框架,它能够帮助开发者构建复杂的、高交互性的Web应用程序。 在实际开发中,很多开发者会将Spring Boot与Vue.js整合在一起,这样能够充分把两者的优势发挥出来。在整合的过程中,通常可分为两种方式:分离式和非分离式。 非分离式整合通常是将Vue.js集成到Spring Boot应用程序中。这意味着在服务器端渲染HTML,Vue.js只是在前端进行处理。为了在Spring Boot中集成Vue.js,需要在pom.xml文件中添加相应的依赖,比如spring-boot-starter-web和vue.js。然后,将Vue.js的代码放到Spring Boot应用程序的resources/static文件夹中,这样Vue.js将能够从该文件夹中获取其所需的HTML、CSS和JavaScript文件。这种整合方式对于某些需求比较简单的Web应用程序是非常有用的,但是,对于一个比较复杂的Web应用程序来说,这种方式可能会导致应用程序的性能降低,因为它需要在服务器端进行一些操作。 相比较之下,分离式整合方式要优秀一些。分离式整合方式是将Vue.js和Spring Boot应用程序分别部署到不同的服务器上。通常,Vue.js部署在一个Web服务器上,由此可以为Web客户端提供更好的响应时间和性能。Spring Boot应用程序可以独立部署在一台不同的服务器中,而Vue.js通过向Spring Boot应用程序发送HTTP请求来获取数据。这种方式可以避免在服务器端进行一些操作,因此能够提高Web应用程序的性能。 总之,关于将Vue.js和Spring Boot整合在一起,非分离式和分离式都有其各自的优缺点。开发者们可以根据自己的需求来选择最合适的整合方式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值