)
#转载自: https://blog.csdn.net/weixin_43860634/article/details/131401678说明: 该文章是我对链接中的操作,经过自己真实配置之后发现一些问题做的一些补充刚拉下来的最新版本的ruo-vue. 按照 链接 之后发现localhost:8080展示不出来页面.要不就是页面在浏览器中不现实不是报500就是403. 要不就是一直加载出不来怎么解决呢前言:要运行vue的前段还需要nodejs环境啊.同志们. 我是不会告诉你们的.我的前段开发工具用的是WebStorm2022 .版本是从gitee上最新拉下来的若依前后端分离项目.https://gitee.com/y_project/RuoYi-Vue改造ruoyi-vue项目后端改造1、引入依赖spring-boot-starter-thymeleafdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-thymeleaf/artifactId/dependency2、修改yml文件配置增加thymeleaf配置#Spring配置 spring:thymeleaf:prefix:classpath:/dist/mode:HTMLencoding:utf-8cache:false3、修改ruoyi-framework项目中的ResourcesConfig.java类配置资源跳转packagecom.ruoyi.framework.config;/** * 通用配置 * * author ruoyi */ConfigurationpublicclassResourcesConfigimplementsWebMvcConfigurer{AutowiredprivateRepeatSubmitInterceptorrepeatSubmitInterceptor;OverridepublicvoidaddResourceHandlers(ResourceHandlerRegistryregistry){/** 本地文件上传路径 */registry.addResourceHandler(Constants.RESOURCE_PREFIX/**).addResourceLocations(file:RuoYiConfig.getProfile()/);/** 页面静态化 */registry.addResourceHandler(/static/**).addResourceLocations(classpath:/dist/static/);/** swagger配置 */registry.addResourceHandler(swagger-ui.html).addResourceLocations(classpath:/META-INF/resources/);registry.addResourceHandler(doc.html).addResourceLocations(classpath:/META-INF/resources/);registry.addResourceHandler(/webjars/**).addResourceLocations(classpath:/META-INF/resources/webjars/);}OverridepublicvoidaddViewControllers(ViewControllerRegistryregistry){registry.addViewController(/index).setViewName(index.html);registry.addViewController(/).setViewName(index.html);registry.setOrder(Ordered.HIGHEST_PRECEDENCE);}/** * 自定义拦截规则 */OverridepublicvoidaddInterceptors(InterceptorRegistryregistry){registry.addInterceptor(repeatSubmitInterceptor).addPathPatterns(/**);}/** * 跨域配置 */BeanpublicCorsFiltercorsFilter(){UrlBasedCorsConfigurationSourcesourcenewUrlBasedCorsConfigurationSource();CorsConfigurationconfignewCorsConfiguration();config.setAllowCredentials(true);// 设置访问源地址config.addAllowedOrigin(*);// 设置访问源请求头config.addAllowedHeader(*);// 设置访问源请求方法config.addAllowedMethod(*);// 对接口配置跨域设置source.registerCorsConfiguration(/**,config);returnnewCorsFilter(source);}}4、修改ruoyi-framework项目中的SecurityConfig.java类配置静态资源访问权限packagecom.ruoyi.framework.config;EnableGlobalMethodSecurity(prePostEnabledtrue,securedEnabledtrue)publicclassSecurityConfigextendsWebSecurityConfigurerAdapter{.......Overrideprotectedvoidconfigure(HttpSecurityhttpSecurity)throwsException{httpSecurity// CSRF禁用因为不使用session.csrf().disable()// 认证失败处理类.exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and()// 基于token所以不需要session.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()// 过滤请求.authorizeRequests()// 对于登录login 验证码captchaImage 允许匿名访问.antMatchers(/login,/captchaImage).anonymous().antMatchers(HttpMethod.GET,/*.html,/**/*.html,/**/*.css,/**/*.js,/static/**,/,/index).permitAll().antMatchers(/profile/**).anonymous().antMatchers(/common/download**).anonymous().antMatchers(/common/download/resource**).anonymous().antMatchers(/swagger-ui.html).anonymous().antMatchers(/doc.html).anonymous().antMatchers(/swagger-resources/**).anonymous().antMatchers(/webjars/**).anonymous().antMatchers(/*/api-docs).anonymous().antMatchers(/druid/**).anonymous()// 除上面外的所有请求全部需要鉴权认证.anyRequest().authenticated().and().headers().frameOptions().disable();httpSecurity.logout().logoutUrl(/logout).logoutSuccessHandler(logoutSuccessHandler);// 添加JWT filterhttpSecurity.addFilterBefore(authenticationTokenFilter,UsernamePasswordAuthenticationFilter.class);// 添加CORS filterhttpSecurity.addFilterBefore(corsFilter,JwtAuthenticationTokenFilter.class);httpSecurity.addFilterBefore(corsFilter,LogoutFilter.class);}......................}前段改造1、修改 ruoyi-ui/src/router/index.js文件 将 mode: ‘history’ 改成 mode: ‘hash’exportdefaultnewRouter({mode:hash,// 去掉url中的#scrollBehavior:()({y:0}),routes:constantRoutes})2、修改 ruoyi-ui/package.json文件注意这里我测试了一下. 不改也行.照样可以打开前段页面.至于这一步 的作用我也不清楚 我的是3.25.3.本来我改了后来专门把^ 去掉又打了一个包看看是否可以访问. 也是正常的dependencies:{core-js:^3.8.1,修改ruoyi-ui/.env.production文件 将’/prod-api’ 改成’/’ 这个必须要改要不你直接访问localhost:8080打不开页面# 若依管理系统/生产环境VUE_APP_BASE_API/prod-apiVUE_APP_BASE_API/打包部署前端打好包之后手动将dist目录复制放到后端的resources目录下面即可然后直接打后端的jar包此时前后端就在一个jar包里面了 然后运行后端 在浏览器输入 localhost:8080就行了 哈哈结束了.
#转载自: https://blog.csdn.net/weixin_43860634/article/details/131401678说明: 该文章是我对链接中的操作,经过自己真实配置之后发现一些问题做的一些补充刚拉下来的最新版本的ruo-vue. 按照 链接 之后发现localhost:8080展示不出来页面.要不就是页面在浏览器中不现实不是报500就是403. 要不就是一直加载出不来怎么解决呢前言:要运行vue的前段还需要nodejs环境啊.同志们. 我是不会告诉你们的.我的前段开发工具用的是WebStorm2022 .版本是从gitee上最新拉下来的若依前后端分离项目.https://gitee.com/y_project/RuoYi-Vue改造ruoyi-vue项目后端改造1、引入依赖spring-boot-starter-thymeleafdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-thymeleaf/artifactId/dependency2、修改yml文件配置增加thymeleaf配置#Spring配置 spring:thymeleaf:prefix:classpath:/dist/mode:HTMLencoding:utf-8cache:false3、修改ruoyi-framework项目中的ResourcesConfig.java类配置资源跳转packagecom.ruoyi.framework.config;/** * 通用配置 * * author ruoyi */ConfigurationpublicclassResourcesConfigimplementsWebMvcConfigurer{AutowiredprivateRepeatSubmitInterceptorrepeatSubmitInterceptor;OverridepublicvoidaddResourceHandlers(ResourceHandlerRegistryregistry){/** 本地文件上传路径 */registry.addResourceHandler(Constants.RESOURCE_PREFIX/**).addResourceLocations(file:RuoYiConfig.getProfile()/);/** 页面静态化 */registry.addResourceHandler(/static/**).addResourceLocations(classpath:/dist/static/);/** swagger配置 */registry.addResourceHandler(swagger-ui.html).addResourceLocations(classpath:/META-INF/resources/);registry.addResourceHandler(doc.html).addResourceLocations(classpath:/META-INF/resources/);registry.addResourceHandler(/webjars/**).addResourceLocations(classpath:/META-INF/resources/webjars/);}OverridepublicvoidaddViewControllers(ViewControllerRegistryregistry){registry.addViewController(/index).setViewName(index.html);registry.addViewController(/).setViewName(index.html);registry.setOrder(Ordered.HIGHEST_PRECEDENCE);}/** * 自定义拦截规则 */OverridepublicvoidaddInterceptors(InterceptorRegistryregistry){registry.addInterceptor(repeatSubmitInterceptor).addPathPatterns(/**);}/** * 跨域配置 */BeanpublicCorsFiltercorsFilter(){UrlBasedCorsConfigurationSourcesourcenewUrlBasedCorsConfigurationSource();CorsConfigurationconfignewCorsConfiguration();config.setAllowCredentials(true);// 设置访问源地址config.addAllowedOrigin(*);// 设置访问源请求头config.addAllowedHeader(*);// 设置访问源请求方法config.addAllowedMethod(*);// 对接口配置跨域设置source.registerCorsConfiguration(/**,config);returnnewCorsFilter(source);}}4、修改ruoyi-framework项目中的SecurityConfig.java类配置静态资源访问权限packagecom.ruoyi.framework.config;EnableGlobalMethodSecurity(prePostEnabledtrue,securedEnabledtrue)publicclassSecurityConfigextendsWebSecurityConfigurerAdapter{.......Overrideprotectedvoidconfigure(HttpSecurityhttpSecurity)throwsException{httpSecurity// CSRF禁用因为不使用session.csrf().disable()// 认证失败处理类.exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and()// 基于token所以不需要session.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()// 过滤请求.authorizeRequests()// 对于登录login 验证码captchaImage 允许匿名访问.antMatchers(/login,/captchaImage).anonymous().antMatchers(HttpMethod.GET,/*.html,/**/*.html,/**/*.css,/**/*.js,/static/**,/,/index).permitAll().antMatchers(/profile/**).anonymous().antMatchers(/common/download**).anonymous().antMatchers(/common/download/resource**).anonymous().antMatchers(/swagger-ui.html).anonymous().antMatchers(/doc.html).anonymous().antMatchers(/swagger-resources/**).anonymous().antMatchers(/webjars/**).anonymous().antMatchers(/*/api-docs).anonymous().antMatchers(/druid/**).anonymous()// 除上面外的所有请求全部需要鉴权认证.anyRequest().authenticated().and().headers().frameOptions().disable();httpSecurity.logout().logoutUrl(/logout).logoutSuccessHandler(logoutSuccessHandler);// 添加JWT filterhttpSecurity.addFilterBefore(authenticationTokenFilter,UsernamePasswordAuthenticationFilter.class);// 添加CORS filterhttpSecurity.addFilterBefore(corsFilter,JwtAuthenticationTokenFilter.class);httpSecurity.addFilterBefore(corsFilter,LogoutFilter.class);}......................}前段改造1、修改 ruoyi-ui/src/router/index.js文件 将 mode: ‘history’ 改成 mode: ‘hash’exportdefaultnewRouter({mode:hash,// 去掉url中的#scrollBehavior:()({y:0}),routes:constantRoutes})2、修改 ruoyi-ui/package.json文件注意这里我测试了一下. 不改也行.照样可以打开前段页面.至于这一步 的作用我也不清楚 我的是3.25.3.本来我改了后来专门把^ 去掉又打了一个包看看是否可以访问. 也是正常的dependencies:{core-js:^3.8.1,修改ruoyi-ui/.env.production文件 将’/prod-api’ 改成’/’ 这个必须要改要不你直接访问localhost:8080打不开页面# 若依管理系统/生产环境VUE_APP_BASE_API/prod-apiVUE_APP_BASE_API/打包部署前端打好包之后手动将dist目录复制放到后端的resources目录下面即可然后直接打后端的jar包此时前后端就在一个jar包里面了 然后运行后端 在浏览器输入 localhost:8080就行了 哈哈结束了.
