一、Vue 项目打包

每次重新部署需执行，如果代码没变动则无需打包

1. 安装依赖（单个项目只需要安装一次依赖）

# 进入项目根目录（以用户端项目为例）
cd /dof/dof-shop-front

# 安装依赖（需要安装Node.js 18.20.x）
npm install

二、Nginx 配置修改

1. 创建项目部署目录

# 创建目录并赋予Nginx权限（目录名需与项目对应）
sudo mkdir -p /var/www/dnf-user-ui /var/www/dnf-admin-ui
sudo chown -R nginx:nginx /var/www/ 

2. 上传打包文件

将两个项目的dist目录里的内容（注意不是dist文件夹 而是里面的东西）分别上传至：

• dnf-user-ui → /var/www/dnf-user-ui/
• dnf-admin-ui → /var/www/dnf-admin-ui/

3. 配置 Nginx（关键参数详解）

商城端
/etc/nginx/conf.d/dnf-user-ui.conf

server {
  listen 8080;                # ✅ 关键参数：项目访问端口（可自定义，需与防火墙开放端口一致）
  server_name _;              # 服务器域名，_表示匹配所有域名，本地测试或无域名时使用
  root /var/www/dnf-user-ui;  # ✅ 关键参数：项目打包目录路径（需与上传目录完全一致）
  index index.html;           # Vue项目入口文件（固定为index.html）

  location / {
    try_files $uri $uri/ /index.html;  # ✅ 核心配置：处理Vue路由跳转，避免404错误
    # 当访问路径不存在时，始终返回index.html，确保单页面应用正常路由
  }

  # 可选：配置静态资源缓存（提升访问速度）
  location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
    expires 7d;  # 静态资源缓存7天，减少服务器压力
    add_header Cache-Control "public";
  }
}

后台管理系统端
/etc/nginx/conf.d/dnf-admin-ui.conf

server {
  listen 38395;                # ✅ 关键参数：项目访问端口（可自定义，需与防火墙开放端口一致）
  server_name _;              # 服务器域名，_表示匹配所有域名，本地测试或无域名时使用
  root /var/www/dnf-user-ui;  # ✅ 关键参数：项目打包目录路径（需与上传目录完全一致）
  index index.html;           # Vue项目入口文件（固定为index.html）

  location / {
    try_files $uri $uri/ /index.html;  # ✅ 核心配置：处理Vue路由跳转，避免404错误
    # 当访问路径不存在时，始终返回index.html，确保单页面应用正常路由
  }

  # 可选：配置静态资源缓存（提升访问速度）
  location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
    expires 7d;  # 静态资源缓存7天，减少服务器压力
    add_header Cache-Control "public";
  }
}

4.生效配置

# 检查配置语法（确保无错误）
sudo nginx -t

# 重启Nginx使配置生效
sudo systemctl restart nginx

三、Q&A（常见问题与解决方案）

Q1：修改了 Vue 项目代码，如何重新部署？

1. 重新打包项目
   例如用户商城端：进入dof/dnf-user-ui/项目目录下运行npm run build,等待打包完成后将dist文件夹内的所有文件上传至/var/www/dnf-user-ui/,上传完成后再linux服务器运行sudo systemctl restart nginx 或 sudo nginx -s reload(重启或者重新加载配置)

总结

1.打包 Vue 项目 → 2. 上传至对应目录 → 3. 配置 Nginx 端口与路径 → 4. 重启生效
记住：端口号、目录名、配置文件中的路径(比如dnf-user-ui)必须完全一致

nginx安装

sudo tee /etc/yum.repos.d/nginx.repo <<EOF
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/7/$basearch/
gpgcheck=0
enabled=1
EOF


sudo yum install -y nginx
sudo systemctl start nginx
sudo systemctl enable nginx