一、Vue 項目打包

每次重新部署需執(zhí)行，如果代碼沒變動則無需打包

1. 安裝依賴（單個項目只需要安裝一次依賴）

# 進入項目根目錄（以用戶端項目為例）
cd /dof/dof-shop-front

# 安裝依賴（需要安裝Node.js 18.20.x）
npm install

二、Nginx 配置修改

1. 創(chuàng)建項目部署目錄

# 創(chuàng)建目錄并賦予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（關鍵參數(shù)詳解）

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

server {
  listen 8080;                # ? 關鍵參數(shù)：項目訪問端口（可自定義，需與防火墻開放端口一致）
  server_name _;              # 服務器域名，_表示匹配所有域名，本地測試或無域名時使用
  root /var/www/dnf-user-ui;  # ? 關鍵參數(shù)：項目打包目錄路徑（需與上傳目錄完全一致）
  index index.html;           # Vue項目入口文件（固定為index.html）

  location / {
    try_files $uri $uri/ /index.html;  # ? 核心配置：處理Vue路由跳轉，避免404錯誤
    # 當訪問路徑不存在時，始終返回index.html，確保單頁面應用正常路由
  }

  # 可選：配置靜態(tài)資源緩存（提升訪問速度）
  location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
    expires 7d;  # 靜態(tài)資源緩存7天，減少服務器壓力
    add_header Cache-Control "public";
  }
}

后臺管理系統(tǒng)端
/etc/nginx/conf.d/dnf-admin-ui.conf

server {
  listen 38395;                # ? 關鍵參數(shù)：項目訪問端口（可自定義，需與防火墻開放端口一致）
  server_name _;              # 服務器域名，_表示匹配所有域名，本地測試或無域名時使用
  root /var/www/dnf-user-ui;  # ? 關鍵參數(shù)：項目打包目錄路徑（需與上傳目錄完全一致）
  index index.html;           # Vue項目入口文件（固定為index.html）

  location / {
    try_files $uri $uri/ /index.html;  # ? 核心配置：處理Vue路由跳轉，避免404錯誤
    # 當訪問路徑不存在時，始終返回index.html，確保單頁面應用正常路由
  }

  # 可選：配置靜態(tài)資源緩存（提升訪問速度）
  location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
    expires 7d;  # 靜態(tài)資源緩存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