一、打包 uniapp h5 项目

(1) 打开 manifest.json 文件，修改相关配置

注：此处的 运行基础路径 参数不要随意填写，此前根据网上分享的资料将其修改为 ./ 导致底部 tab 栏的图片显示异常，随后删除相关参数后重新打包才解决了该问题。

对应的源码：

"h5" : {
    "router" : {
        "base" : "",
        "mode" : "history"
    }
}

更多详情可参见：https://uniapp.dcloud.net.cn/collocation/manifest.html#h5

(2) 开始项目打包

如图所示，点击 发行 中的网站选择：

在弹出的对话框中直接点击 发行 （无需填写网站域名）：

打包成功后，控制台会显示导出的文件路径，打开目标文件夹：

创建一个新的文件夹 dist，并将之前打包后的相关文件复制至 dist 文件夹中（此步骤为后续的 express 项目加载前端资源做准备）：

---

二、修改 express 相关配置

(1) 添加打包后的前端资源文件

将先前打包好的前端资源文件放在新创建的 dist 文件夹中，并将其放入 express 项目：

注：这里的 favicon.ico 图标需要自己制作，可以使用相关在线工具制作 ico 图标：https://www.bitbug.net/

(2) 修改 app.js 文件

// app.js
const express = require("express");
const app = express();
...
// 加载前端打包后的项目
app.use(express.static(path.join(__dirname, 'dist')));
...
module.exports = app;

此时启动项目后，可以通过访问 http://localhost:3000/ 来查看是否能够成功加载前端资源文件。

(3) 修改项目启动命令

由于项目在 windows 系统开发，可以通过 SET NODE_ENV=development&& node ./bin/www来启动项目，而云服务器是 linux，如果再使用该命令来启动则会报错，因此，此处引入 cross-env 这个第三方工具来帮助我们解决跨平台的环境变量设置。

安装 cross-env：

npm i cross-env

修改 package.json 文件：

"scripts": {
    "start": "cross-env NODE_ENV=production node ./bin/www",
    "dev": "cross-env NODE_ENV=development nodemon ./bin/www"
},

使用 cross-env 来设置环境变量后，无需修改命令即可在不同系统中执行（注：linux 上部署项目可能会有权限问题，后续将会说明）

---

三、使用宝塔面板部署项目

(1) 宝塔面板安装

可以使用在线安装方式，访问宝塔面板安装地址：https://www.bt.cn/new/download.html

填写相关信息后，点击安装：

在弹出的对话框中根据自身实际选择要安装的环境：

安装成功后，在弹出的对话框中复制宝塔面板访问地址及相关账户信息（不小心关掉了也没关系，可以使用 Xshell 相关工具访问服务器，然后执行 bt 查看相关命令获取账户信息）

(2) 项目环境搭建

访问上一步复制的宝塔面板访问地址，输入相应的账号密码登录后，点击左侧菜单栏的 软件商店 选项，下载所需的软件。此处项目使用了 Node.js 和 MongoDB，所以安装了相关软件，应根据自身实际安装相应的软件。

注：此处一定要注意安装的 Node.js 版本，最好是开发的时候使用的是什么版本，就安装什么版本，否则项目中使用的第三方依赖包可以会由于 Node.js 的版本太高或太低而出现报错，其他软件也一样，要注意版本的兼容性问题。（举例说明：比如我在 windows 操作系统下开发的项目，使用的 Node.js 版本为 18.16.0，项目中使用了 mongoose 这个第三方库，安装的版本是 8.7.0，而云服务器安装的 Node.js 版本为 14.17.6，此时如果将项目部署在云服务上将会出现报错，最终通过降低了 mongoose 的版本为 6.13.2 才解决了该问题。）

四、添加 MongoDB 数据库

安装完 MongoDB 后，点击左侧菜单栏的 安全 选项，添加端口规则，放行 27017 端口：

注：购买的云服务器也要放行 27017 端口，此处以阿里云为例：

点击左侧菜单栏的 首页 选项，选择并打开 MongoDB 服务：

点击左侧菜单栏的 数据库 选项，添加数据库：

开启安全认证，并设置密码和添加权限，此处的 权限 全部勾选（可根据自身实际做选择）

由于我们需要使用本地的数据库管理工具连接该远程数据库，所以需要修改 MongoDB 的相关配置（记得保存）：

使用数据库管理工具 MongoDB Compass 来连接该远程数据库（也可以使用其他数据库管理工具，根据自身实际选择）：

连接的 url：

mongodb://root:你设置的密码@你的服务器地址:27017/
// 例：
mongodb://root:123abc@192.168.1.1:27017/

补充：如果要在 express 项目中使用 mongoose 连接该远程数据库，则需要写成：

// 导入模块
const mongoose  = require("mongoose");
// 数据库连接地址
let DB_URL = 'mongodb://root:你设置的密码@你的服务器地址:27017/数据库名称?authSource=admin'

mongoose.connect(DB_URL).then(
    res => {
        console.log('-- Connection successful. --');
    },
    err => {
        console.log('-- Connection failed. --');
    }
)
module.exports = mongoose;

至此，数据库相关的准备工作基本结束，可以先使用本地的数据库管理工具测试是否能够正常运行，MySQL 数据库也是通过类似的方式来添加。

五、部署 Express 项目

先在本地将整个 express 项目压缩成 zip 文件，并上传至服务器。点击左侧菜单栏的 文件 选项，在 www 目录下上传项目文件：

解压项目文件：

点击左侧菜单栏的 网站 选项，点击添加 Node 项目（阿里云也要放行 3000 端口，同数据库端口放行方法一致）：

为项目绑定域名，并开启外网映射：

修改反向代理配置（记得保存）：

注：此处的 proxy_pass 端口后不能与项目的启动端口号相同，第一次部署的时候不清楚，导致无法通过绑定的域名访问，虽然我还不知道原理≡(▔﹏▔)≡

注意：项目启动的时候， cross-env 可能会出现报错 cross-env: Permission denied，它提示权限不够，在网上查找了相关资料后，在项目终端中使用了命令 chmod -R a+x node_modules 解决了该问题。

参考资料：https://stackoverflow.com/questions/54831494/sh-1-cross-env-permission-denied-on-laravel-mix

该命令执行路径（进入该项目文件夹，点击顶部菜单栏的 终端 选项）：

项目如果无法正常执行，可以通过查看 项目日志 来查看报错信息：

启动项目后，即可通过 绑定的域名:3000 访问网站。