vue spring-boot 项目前后分离发布

1.    注意看下vue项目config目录中Index.js文件,看是否是以下配置:

build: {
sitEnv: require( './sit.env'),
prodEnv: require( './prod.env'),
index: path. resolve( __dirname, '../dist/index.html'),
assetsRoot: path. resolve( __dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', //请根据自己路径配置更改
staticPath: './static/', //请根据自己路径配置更改
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: [ 'js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process. env. npm_config_report
},

2.    命令窗口进入vue工程目录,运行 npm run build等项目运行完成,等运行完成。

3.    进入vue工程的dist文件夹,拷贝inedx.html以及项目图标到项目的templates目录,拷贝static下的所有文件到项目的static目录下。

4.    Ass-stage新建controller,跳转到项目的index.html页面。

@Controller

@RequestMapping("/")

publicclass *******Controller {

 

@RequestMapping(path = "/", method =RequestMethod.GET)

public String index() {

        System.out.println("进入项目首页....");

        return "index";

}

}

5.    输入地址访问项目,如果访问出现js或者css无法找到,则项目中增加config配置文件,配置如下:

@Configuration

publicclass WebMvcConfig extends WebMvcConfigurerAdapter {

 

@Override

public voidaddResourceHandlers(ResourceHandlerRegistry registry) {

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

}

}

6.重启项目,访问。
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
VueSpring Boot是一对非常流行的前后端分离开发框架。Vue是一个用于构建用户界面的JavaScript框架,而Spring Boot是一个用于构建Java应用程序的框架。 在VueSpring Boot的结合中,前端和后端的开发可以完全独立进行,各自负责不同的功能实现。前端开发者使用Vue来构建界面和处理用户交互,而后端开发者使用Spring Boot来处理业务逻辑和数据持久化。 在实战开发中,可以利用Vue的组件化和模块化特性,将页面拆分成多个独立的组件,每个组件负责不同的功能实现。同时,Vue提供了丰富的插件和工具,可以方便地进行前端开发,如Vue Router用于处理路由,Vuex用于管理应用状态等。 而Spring Boot则提供了Spring框架的强大功能,例如依赖注入、AOP、事务管理等。后端开发者可以使用Spring Boot来处理前端发送的请求,进行数据的验证、处理和存储等。同时,Spring Boot还可以与其他开源框架集成,如Spring Cloud用于构建分布式系统,MyBatis用于数据库操作等。 在实战开发中,可以使用webpack将Vue代码打包成静态资源,然后放到Spring Boot的静态资源目录中进行访问。同时,前端开发者也可以使用前端构建工具如npm或yarn来管理前端依赖。 总结来说,VueSpring Boot的结合可以实现前后端分离开发,提高开发效率和代码可维护性。使用VueSpring Boot的开发者可以分别专注于前端和后端的工作,提高开发效率。实战开发中,可以根据具体的业务需求选择适合的开发框架和工具,以实现更好的用户体验和系统性能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值