当前位置: 首页 > 新闻中心 > spring boot vue全栈开发实战 编程 大型spa应用 java软件开发 企业级

spring boot vue全栈开发实战 编程 大型spa应用 java软件开发 企业级

发布时间:2024-04-01 3:10:50

  1. Vue项目直接部署Springboot项目里
  2. node.js在springboot中怎么用cmd启动前端

一、Vue项目直接部署Springboot项目里

开始准备:

注意,我的 springboot 用的视图模板是 thymeleaf ,静态文件夹路径默认是 resources/static/ ,我们目的就是要把 dist 这个打包好的文件夹,整个放进去这里。

1.修改vuejs的 config/index.js ,在里面找到 assetspublicpath ,改为 /dist/ ,记住,是 build:{} 这里的,不是上面 dev:{} 的。

2.执行 npm run build ,会出现一个 dist 文件夹在vuejs项目目录里。

3.把这个 dist 文件夹copy到 springboot 的 resources/static/ ,记住,是整个 dist 连文件夹一起copy过来。

ok,搞掂。就是这么简单。

访问 localhost/dist/index.html/#/ 就可以

按上文搞的还是不行,发现路由没有跳转出现空白页

https://www.cnblogs.com/ting0527/p/11654678.html

发现跳转不了 应该是history的模式路由需要修改才能改成hash

最后把项目扔到根目录localhost/ (不用index.html)

如果不想要根目录 我尝试了一下有404的问题,时间有限,以后有机会慢慢解决

二、node.js在springboot中怎么用cmd启动前端

第一步:打开小黑窗、找到前端项目对应的路径、node项目都有个package.json、即是项目的配置文件 如: e:\ideaworkspaces\springbootwechatfoot\ vuejs-project

第二步:先看有没node_modules、没的话、就执行npm install命令

第三步:运行服务的话、执行npm run dev(dev可自定义可在package.json中修改)

第四步:如果需要单独引入单个包、就是npm install 包名

查看更多