使用IDEA后端java代码打包为jar,使用Nginx打包前端Vue

2024-06-04 3940阅读

使用IDEA后端java代码打包为jar,使用Nginx打包前端Vue

目录

一、在IDEA中打包后端代码jar包

1.在pom.xml中配置build

2. 双击package打包项目

3.Build成功后,打开target包下生成的.jar包所在的文件

4.运行.jar包

二、使用nginx部署前端 

1.打包前端生成dist文件

2.build成功后,vue项目生成一个dist文件夹,复制dist文件夹

3.下载nginx Windows版

4.nginx下载解压后,删除nginx的html文件夹下的文件,并将2中dist文件夹下的文件复制到html文件下

 5.配置nginx

6.切换到nginx.exe所在的文件夹,打开cmd

7.输入端口号测试


一、在IDEA中打包后端代码jar包

1.在pom.xml中配置build
    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    
2. 双击package打包项目

使用IDEA后端java代码打包为jar,使用Nginx打包前端Vue 第1张

注意!!若报错:No valid Maven installation found. Either set the home directory in the configuration dialog or set the M2_HOME environment variable on your system.

则是Maven配置有问题,核对一下你的Maven的配置路径

使用IDEA后端java代码打包为jar,使用Nginx打包前端Vue 第2张

3.Build成功后,打开target包下生成的.jar包所在的文件夹

使用IDEA后端java代码打包为jar,使用Nginx打包前端Vue 第3张

使用IDEA后端java代码打包为jar,使用Nginx打包前端Vue 第4张

4.运行.jar包

 在有.jar文件的文件下打开命令窗口使用IDEA后端java代码打包为jar,使用Nginx打包前端Vue 第5张

输入:java -jar xxx.jar(你的.jar文件名) 回车,运行  (注意:若在idea中启动了后端,则需关闭)

使用IDEA后端java代码打包为jar,使用Nginx打包前端Vue 第6张

使用IDEA后端java代码打包为jar,使用Nginx打包前端Vue 第7张 显示出端口号,则启动成功!

二、使用nginx部署前端 

1.打包前端生成dist文件

在前端的控制台输入npm run build

使用IDEA后端java代码打包为jar,使用Nginx打包前端Vue 第8张

2.build成功后,vue项目生成一个dist文件夹,复制dist文件夹

使用IDEA后端java代码打包为jar,使用Nginx打包前端Vue 第9张

3.下载nginx Windows版

https://nginx.org/en/download.html使用IDEA后端java代码打包为jar,使用Nginx打包前端Vue 第10张https://nginx.org/en/download.html

4.nginx下载解压后,删除nginx的html文件夹下的文件,并将2中dist文件夹下的文件复制到html文件下

使用IDEA后端java代码打包为jar,使用Nginx打包前端Vue 第11张 

 5.配置nginx

用记事本打开nginx.conf(前提后台nginx是未启动的)

使用IDEA后端java代码打包为jar,使用Nginx打包前端Vue 第12张

location /dev-api {
	    proxy_pass http://localhost:9090/;
	}

使用IDEA后端java代码打包为jar,使用Nginx打包前端Vue 第13张

6.切换到nginx.exe所在的文件夹,打开cmd

使用IDEA后端java代码打包为jar,使用Nginx打包前端Vue 第14张

先输入 nginx -s stop 关闭nginx,再启动 start nginx

使用IDEA后端java代码打包为jar,使用Nginx打包前端Vue 第15张

使用IDEA后端java代码打包为jar,使用Nginx打包前端Vue 第16张

7.输入端口号测试

使用IDEA后端java代码打包为jar,使用Nginx打包前端Vue 第17张


    免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们,邮箱:ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

    目录[+]