java+vue项目部署记录

时间:2025-01-30 07:56:24

目录

前言

一、java和vue

二、部署记录

1.获取代码

2.运行前端

3.运行后端

三、其他

1.nvm

总结


前言

近期工作需要部署一套java+vue前后分离的项目,之前都略有接触,但属于不及皮毛的程度,好在对其他开发语言、html js这些还算熟,相关开发工具也接触过,也还勉强可以搞一搞。

本文即把过程中涉及步骤、用到的工具、问题、解决都做一记录。


一、java和vue

java是流行的web后端开发语言,目前最为流行的就是spring cloud微服务开发框架

vue是流程的web前端框架,它使用了组件化的开发方式,使得前端开发更加模块化和可维护。

二、部署记录

1.获取代码

git clone

但是后面发现后端代码就是一些示例代码,前端也有报错,感觉文件不全啊。

web界面看了下git,原来有其他分支,master分支后续没更新,实际修改在dev分支

决定删除代码,重新搞

git clone git地址

git checkout dev

git pull

2.运行前端

1、npm install报错:npm ERR! cb()never called!

一开始按照项目提示安装的node14,结果报错。后来升到16(16.20.2)可以了

过程中还清除npm缓存,删除node_modules目录、修改文件夹权限都不好使

2、npm run dev报错:Module build failed: TypeError: Cannot read property 'range' of null

这个是因为babel-eslint版本问题,解决:

npm install babel-eslint@7.2.3 --save-dev

3、后端api配置

有的是通过代理设置,有的是env直接设置,反正都是为了解决跨域问题,即在前端应用下/api方式访问后端

3.运行后端

后端spring有多个项目,目前还不会玩转。

不过基本的实体类、Service、Controller是知道的,但是发现这个项目没用controller,那么api咋定义的呢?

找了找发现是使用了xml配置文件定义operation(type=api),下面再定义参数context、step(操作步骤,对应某个方法,这个方法再接收context的具体参数)

待后续更新…

三、其他

1.nvm

由于之前就有node,现在又要换node版本,于是看到nvm,可以进行node版本管理

nvm list                               列出所有node版本

nvm install node版本号      安装指定版本的node

nvm use node版本号          启用某个版本的node

注意:一开始安装了nvm但是发现无法安装node,后来看到有提示说安装路径不能有空格,于是重新安装了nvm,问题解决。


总结

以上就是今天要讲的内容,本文仅仅简单介绍了本地部署java+vue的部署过程,以及过程的一些问题与解决,希望可以帮助大家。