vue3开发的项目怎么和sanic后端一起部署

2024年7月11日 10:52 by wst

服务部署

---

问题

前后端部署在一起的时候，路径转发出现差错。比如：前端请求的地址是“/api/rel/store”，但是后端没有这个地址，只有“/rel/store”。因为前端开发了防止跨域做了“/api”代理转发。

解决方法

1. 前端转发配置，配置文件.env.development内容如下：

# 本地环境
VITE_USER_NODE_ENV = development

# 公共基础路径
VITE_PUBLIC_PATH = /

# 路由模式
# Optional: hash | history
VITE_ROUTER_MODE = hash

# 打包时是否删除 console
VITE_DROP_CONSOLE = true

# 是否开启 VitePWA
VITE_PWA = false

# 开发环境接口地址
VITE_API_URL = /api

# 开发环境跨域代理，支持配置多个
VITE_PROXY = [["/api","http://127.0.0.1:9000"]]

2. nginx配置文件test.conf，内容如下：

server{
    listen 80;  # 指定端口，nginx默认端口为80
    server_name atuc.xyz.com;  # 指定域名
    location / {
        root /data/haiwan-manage;  # 指定静态网站根目录
        index index.html;  # 指定默认访问文件
    }
    location /api/ {
      rewrite /api/(.*) /$1 break;
      proxy_pass http://127.0.0.1:9000;
    }
}

注意其中的第9行，意思是把“/api/xxx” 重定向到“/xxx”。还有location /api/ 也不能写错，少个/都不行，否则就报错。

总结

这样做的原理是：

1.把后端所有的接口放在/api/下面，前端的路径正常请求，因为前端路径有没有/api/开头的。

2.在nginx中，转发到后端时，要去掉/api/，设置方法就是上面说的那样。

至此，把前后端部署在同一个域名下面，完美解决！

附录：

前端路由的history模式配置方法：

.env.development :

# 本地环境
VITE_USER_NODE_ENV = development

# 公共基础路径
VITE_PUBLIC_PATH = /

# 路由模式
# Optional: hash | history
VITE_ROUTER_MODE = history

# 打包时是否删除 console
VITE_DROP_CONSOLE = true

# 是否开启 VitePWA
VITE_PWA = false

# 开发环境接口地址
VITE_API_URL = /api

# 开发环境跨域代理，支持配置多个
VITE_PROXY = [["/api","http://127.0.0.1:9000"]]

nginx配置文件：

server{
    listen 80;  # 指定端口，nginx默认端口为80
    server_name atuc.juxinyunsu.com;  # 指定域名
    location / {
        root /data/haiwan-manage;  # 指定静态网站根目录
        index index.html;  # 指定默认访问文件
        try_files $uri $uri/ /index.html;
    }
    location /api/ {
      rewrite /api/(.*) /$1 break;
      proxy_pass http://127.0.0.1:9000;
    }
}

 

---