项目部署

nginx 部署

1、配置 baseUrl

配置 .env.prod 文件下的 VITE_SERVICE_BASE_URL（打包环境变量是prod，就会使用.env.prod文件里的配置）根据实际情况配置

例如：

VITE_SERVICE_BASE_URL=https://xxxxx.com:3000/

这样配置以后，前端请求后端会直接请求 https://xxxxx.com:3000/，假设你的后端服务地址是``http://localhost:3000/，后端和前端部署在同一个服务器上，那么连nginx反向代理都不用配置即可连通

2、打包项目

bash

# 打包项目
pnpm run build

3、将打包好的 dist 文件复制到服务器的某个目录下

这个目录，你知道在哪里就ok，nginx 配置里会使用到这个目录

4、配置 nginx

将下面代码复制到 nginx.conf 文件的 http对象下

server {
  listen       80; # 监听80端口
  server_name  localhost; 


  location / {
    root   /www/wwwroot/vue3-naive-admin/dist; # 存放 dist 文件的目录 和3步骤呼应
    index  index.html;
    try_files $uri $uri/ /index.html; # history 模式需要使用 try_files 将请求转发到 index.html
  }
}

5、保存配置重启 nginx

Docker 部署

1、配置 baseUrl

配置 .env.prod 文件下的 VITE_SERVICE_BASE_URL（打包环境变量是prod，就会使用.env.prod文件里的配置）根据实际情况配置

例如：

VITE_SERVICE_BASE_URL=https://xxxxx.com:3000/

这样配置以后，前端请求后端会直接请求https://xxxxx.com:3000/，假设你的后端服务地址是``http://localhost:3000/，后端和前端部署在同一个服务器上，那么连nginx反向代理都不用配置即可连通

2、构建项目

bash

pnpm run docker:build:prod # 没有 pnpm 就使用 npm

3、启动容器

bash

pnpm run docker:up:prod

启动后访问 服务器ip地址:80 就可以访问

项目部署 ​

nginx 部署 ​

Docker 部署 ​

项目部署

nginx 部署

Docker 部署