宝塔Linux部署 一个基于uni-app 系统指南

这是一个基于 uni-app 开发的系统,支持 H5、小程序、APP 等多端。在宝塔 Linux 上主要部署 H5 版本。

部署步骤
一、环境准备
1.1 安装必要软件(在宝塔面板中)

Node.js(推荐版本 14.x 或更高)
宝塔面板 → 软件商店 → 运行环境 → 安装 Node.js 版本管理器
或在终端执行:nvm install 14 或 nvm install 16

Nginx(用于部署静态文件)

宝塔面板 → 软件商店 → 运行环境 → 安装 Nginx

二、构建 H5 版本
方式一:使用 HBuilderX(推荐)

在本地使用 HBuilderX 打开项目

点击菜单:发行 → 网站-H5

5

  1. 构建完成后,会在 unpackage/dist/build/web 目录生成文件

1

4.将构建后的文件上传到服务器

2

5.PHP版本使用纯静态

4

6.配置nginx.conf


server {
    listen 8083;
    server_name yourdomain.com;  # 替换为你的域名
    root /www/wwwroot/default/quote-app/web;
    index index.html index.htm;

    # 开启 gzip 压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;

    # SPA 路由支持(重要!)
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # API 代理(如果需要)
    # 如果你的后端 API 在同一个服务器,可以配置代理
    location /prod-api/ {
        proxy_pass http://127.0.0.1:8080/prod-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_set_header X-Forwarded-Proto $scheme;
    }

    # 安全设置
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
}

7.完成之后,效果如下:

6

posted @ 2025-11-05 10:43  了解化  阅读(45)  评论(0)    收藏  举报