windows10 下通过nginx代理服务器部署 vue 访问后台 springboot （前后端分离

原创于 2021-08-11 12:06:13 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #vue #nginx #spring boot

Java 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Windows10环境下，使用Nginx作为代理服务器，实现Vue前端应用与SpringBoot后台服务的部署和访问。首先，通过`npm run build:prod`命令打包Vue项目。接着，配置Nginx，设置监听8081端口，将/prod-api/路径代理到本地8002端口的SpringBoot服务。最后，启动SpringBoot服务，通过localhost:8081/项目名称即可访问前端应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

windows10 下通过nginx代理服务器部署 vue 访问后台 springboot （前后端分离）

1、vue 项目打包
命令 npm run build:prod
项目打包地址
在项目跟目录会生成一个文件包含了项目打包之后的效果
2、 nginx 配置

   server {
        listen       8081;
        server_name  localhost;
        #  项目绝对路径
        root C:/nginx-1.20.1/nginx-1.20.1/html;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        # 后台springboot 接口服务代理
        location /prod-api/ {
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://127.0.0.1:8002/;
        }

        location / {
            root   html;
            index  index.html index.htm;
        }

现在就可以访问 vue项目了 localhost:8081/ 项目名称
3、 Strping boot 直接打包，通过 java -jar (jar 名) 运行了。