Windows 11

nginx-1.20.0

"vue": "^3.4.21"

---

序章

vue3 开发，不需要后端服务业是可以的。

在需要后端服务时，使用 nginx 来转发请求是很好的（个人开发者）。

注，还有什么其它方式吗？

注，本文的后端服务 是使用 Java 开发的 HTTP 接口。

注，参考资料#2 介绍了 多个 vue.js 3.0 项目的配置，本文则 多了 后端服务的配置。

架构图

用户 访问 nginx；

nginx 转发 vue.js 项目的文件（npm run build 后在 dist 目录生成的）；

nginx 转发 后端请求到 Java 后端。

vue.js 3.0 项目编译

执行 npm run build 命令，默认生成到 项目的 dist 目录下：

注，SPA，单页面应用。

启动后端服务

Java 程序：

注，开发环境，就不用太麻烦了。

ben发布于博客园

配置 nginx（重点）

http 节点下配置：

servers 下放置 服务器配置，不同域名、不同端口的服务器。

upstreams 下放置 后端服务 的 upstream 配置。

server 配置

servers 下建立 服务器的 conf 文件：localhost.conf

server {
    listen       80;
    listen       [::]:80;
    #server_name  _;
    # 关键1
    root         D:/code/tlprj/vue3prj/dist;

    # Load configuration files for the default server block.
    include D:/work/nginx-1.20.0/conf/default.d/*.conf;

    location ^~ /app {
            proxy_set_header   X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header   Host      $http_host;
            proxy_set_header X-NginX-Proxy true;

            # 关键2
            proxy_pass http://server29001;
    }

    location ^~ /system {
            proxy_set_header   X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header   Host      $http_host;
            proxy_set_header X-NginX-Proxy true;

            # 关键2
            proxy_pass http://server29001;
    }
	
    # 关键3
	# view 地址 跳转到 首页
	location / {
		try_files $uri $uri/ /index.html;
	}

    error_page 404 /404.html;
        location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }
}

关键1：

server.root 配置，指向 vue.js 3.0 项目的 dist目录。

关键2：

转发请求到后端的 Java 程序。

关键3：

在不同的 vue.js 视图（View） 刷新时，放置返回到首页。见 参考资料#1 的官方文档介绍。

注意，

其中转发 以 /app、/system 开头的 两类请求， 可以优化为一个，后端服务统一前缀。

其中的 location 用的是【^~】，而不是 单独的【~】。

upstream 配置

upstream server29001 {
        server localhost:29001;
}

ben发布于博客园

使用开发环境

启动 nginx。

启动后端服务——确保接口已开发完毕，可联调、可发布。

接下来，在 vue.js 3.0 项目尽情开发吧——好好调用后端接口。

征求意见

在 vue.js 3.0 项目中，使用 npm run dev 命令 会启动一个 端口为5137 的web服务，可以访问 Web项目。

在不使用 nginx 时，怎么在 这种情况下 使用后端服务呢？

ben发布于博客园

---END---

本文链接：

https://www.cnblogs.com/luo630/p/18166690

ben发布于博客园

参考资料

1、vue router

https://v3.router.vuejs.org

其中有一个 页面介绍 nginx 的 try_files 配置的。

2、手把手教 Nginx 部署 Vue 项目

2020-03-19

作者：狗尾巴花的尖

https://juejin.cn/post/6844904096973979662

3、【nginx】nginx之location规则详解:
作者：Sun Peng
于 2023-07-25 22:45:44 发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
https://blog.csdn.net/weixin_53791978/article/details/131927724

4、

ben发布于博客园

ben发布于博客园