持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

0x00 前言

本文将对 Vue-Vben-Admin 项目部署流程和注意事项进行记录说明，耐心读完，相信您会有所收获。

项目将部署到根目录下，以下为环境/软件版本：

nginx/1.20.2
node/16.14.2

0x01 本地开发

根目录下 .env文件中设置项目运行端口

VITE_PORT = 3100

根目录下 .env.development 文件中设置以下内容，其中通过 vite 的 proxy 进行代理，项目可以配置多个服务源。


# 资源公共路径,需要以 /开头和结尾
VITE_PUBLIC_PATH=/

# 本地开发代理，可以解决跨域及多地址代理
# 如果接口地址匹配到，则会转发到http://api.yuanshen.site:8089/api，防止本地出现跨域问题
VITE_PROXY=[["/basic-api","http://api.yuanshen.site:8089/api"],["/mock-api","http://localhost:3000"]]

# 接口地址
VITE_GLOB_API_URL=/basic-api

当调用接口时，系统Axios封装方法默认省略接口地址，使用 VITE_GLOB_API_URL指定的接口地址，也就是 ["/basic-api","http://api.yuanshen.site:8089/api"]。

export function updateRole(params: RoleModel) {
  return defHttp.put<boolean>(
    {
      url: Api.ROLE,
      params,
    },
    {
      // 默认省略
      // apiUrl: '/basic-api', 
      withToken: true,
    },
  );
}

需要调用其他源的接口时，只需显示设置 requestOptions 的 apiUrl 值即可。

export function updateRole(params: RoleModel) {
  return defHttp.put<boolean>(
    {
      url: Api.ROLE, 
    },
    {
      apiUrl: '/mock-api',  
    },
  );
}

0x02 构建

根目录下 .env.production 文件中设置以下内容。

# 资源公共路径  因为根目录下部署要以 / 开头和结尾
VITE_PUBLIC_PATH=/
 
# 接口地址 可以由nginx做转发或者直接写实际地址
VITE_GLOB_API_URL=/basic-api

项目开发完成之后，执行以下命令 yarn build进行构建。构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件。

0x03 部署

http-server 是一个简单的零配置命令行静态 HTTP 服务器接下来使用一个简单的静态 HTTP 服务器http-server 将构建打包好的文件发布

$ http-server -p 5500

此时项目地址 http://localhost:5500 。

部署到根目录

使用 nginx 处理跨域，监听 9000 端口,同时 location proxy_pass 设置代理转发。

server {
    listen 9000;
    server_name localhost;

    # 前台页面地址
    location / { 
        proxy_pass http://localhost:5500;
    }
}

当访问项目时，只要输入地址 http://ip:9000/ 自动转向 http://localhost:5500 。

根据 .env.production 配置接口地址 VITE_GLOB_API_URL=/basic-api ，在 nginx 配置请求转发到后台

server {
    listen 9000;
    server_name localhost;

    # 前台页面地址
    location / { 
        proxy_pass http://localhost:5500;
    }

    # 后端接口代理，用于解决跨域问题
    location /basic-api {
        # 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://api.yuanshen.site:8089/api;
        proxy_redirect default;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers X-Requested-With;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
    }
}

与官网配置有所不同，需要将以下代码注释掉

location /basic-api {
    # proxy_set_header Host $host;
    ...
    # proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    ...
}

否则会报以下错误

connect() failed (10061: No connection could be made because the target machine actively refused it) while connecting to upstream

0x04 📚 参考

"构建&部署",vvbin.cn

Windows下Nginx部署Vben Admin项目