1.基本介绍
使用Ecipse,cnpm,vue3,
cenos7上:java,nginx,mysql
spring项目与vue项目:
(亲测过,很棒的一个资源,前后端代码都有,选java端+vue端的,教程也很棒)
https://blog.csdn.net/xiaojinlai123/article/details/90694372)
2.Eclipse 和 cnpm
1.解压,使用eclipse导入(file - import ,选择maven项目)
导入即可
2.对于vue项目
解压-使用cnpm install (在目录输入cmd,在输入这个命令,就可以生成node_modules)
3.同时运行两个项目
vue项目使用cnpm run serve(vue3 不适用 cnpm run dev)
是否可以成功登陆,输入:localhost:8080
(解释:vue项目使用8080端口,spring项目使用8088端口,可以查看配置文件./yml或者是./properties文件)
那么vue项目端口怎么转换呢?答案在:src/api/baseURL.js文件中有:
case ‘dev’:
baseUrl = “http://localhost:8088/” //开发环境url
在.env.development(看上图结构表)中有定义使用dev:
NODE_ENV = dev
然后在src/utils/request.js文件引用baseURL,所以前后端之间的交流端口发生改变,具体怎么交流,看代码(因为我也是小白一个)。
3.部署
1.本机登录实例可以运行
2.使用cenos7
3.服务器上已安装nginx和java,mysql(虽然没用的)
部署方法介绍(两种):
1.nginx+jar包(以下使用的方式)
2.vue整合到spring项目中,打包成war包(还没搞定)
jar包部署
1.eclipse上,改变pom.xml( jar),右击项目- run as - maven install
可能出现错误:
Perhaps you are running on a JRE rather than a JDK?
1.window- preferences - java -installed JREs - Add -选择(我的jdk在C:\Program Files\Java\jdk1.8.0_131)
2.第二步(我不清楚为什么这么做,但是可以解决问题),勾选jdk
2.maven install 之后,查看最后几行日志,那里有jar包的地址。
把jar包(应该只需要jar包,作者小白一枚,为了防止错误,就全copy过去了)放到云服务上(建议新建文件夹如jarWork)
暂停到这里,转到vue项目
vue项目部署
1.改变baseURL
变为http://ip:8088/
(建议也改request.js,我没改出现request的url端口不变)
如:
const service = axios.create({
baseURL: ‘http://ip:8088/’, // api 的 base_url
timeout: 15000, // 请求超时时间
})
2.在项目目录下运行cnpm run build,生成dist文件,把dist里的文件拉到云服务的/usr/local/nginx/html下,如(50x.html 是原有的不需要理会):
3.设置/usr/local/nginx/conf/nginx.conf 文件,这里设置了,项目的目录,端口,以及允许ngnix的静态文件使用POST方法(不设置会报405错误)
server {
listen 8081; # 浏览器中访问时需要输入的端口号,不用8080是防止端口冲突
server_name ip; # 自己服务器的外网ip地址
location / {
root /usr/local/nginx/html/; # 项目存放的地方
index index.html;
try_files $uri $uri/ @router; # 处理刷新页面时显示空白页问题
}
location @router{ # 处理刷新页面时显示空白页问题
rewrite ^.*$ /index.html last;
}
error_page 405 =200 @405;
location ~ .*\.(htm|html|gif|jpg|jpeg|png|ico|css|js|txt|flv|doc)$ {
root /usr/local/nginx/html/;
error_page 405 =200 $uri;
}
}
}
4.开放防火墙端口
firewall-cmd --zone=public --add-port=80/tcp --permanent 开启80端口
firewall-cmd --reload (一定要reload,要不然会开放不成功)
firewall-cmd --list-port 查看已开放的端口
运行
1.到达jar包存放的地方 (使用命令cd 路径),启动:java -jar 包名字,会出现Springboot的日志
2.到达/usr/local/nginx/sbin 下,使用./nginx -s reload重启nginx,输入网址:
ip:8081/index 进入登录页面