企业官网建设流程全解析

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

部署步骤

一、环境准备

1.1 安装必要软件（在宝塔面板中）

• Node.js（推荐版本 14.x 或更高）

  • 宝塔面板 → 软件商店 → 运行环境 → 安装 Node.js 版本管理器

  • 或在终端执行：nvm install 14或nvm install 16

• Nginx（用于部署静态文件）

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

二、构建 H5 版本

方式一：使用 HBuilderX（推荐）

1. 在本地使用 HBuilderX 打开项目

2. 点击菜单：发行 → 网站-H5

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

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

5.PHP版本使用纯静态

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.完成之后，效果如下：