小怪兽党建系统Java版前端部署

一、UniApp模块部署

（一）使用VSCode部署

1. 安装插件：打开VSCode，在扩展商店中搜索并安装“UniApp Support”插件，为开发和部署UniApp项目提供支持。安装完成后重启VSCode，确保插件生效。
2. 导入项目：点击VSCode的“文件”菜单，选择“打开文件夹”，选中下载的小怪兽党建系统UniApp项目文件夹。等待项目加载完成，VSCode会自动识别项目中的依赖并进行配置。
3. 环境设置：在VSCode的终端中，输入npm install命令，安装项目所需的依赖包。安装过程中可能会因网络问题出现报错，若出现问题，可尝试切换网络或使用淘宝镜像源重新安装，命令为npm install --registry=https://registry.npm.taobao.org。
4. 打包与发布
   • 小程序端：在VSCode的终端中，运行npm run build:mp-weixin命令进行小程序端的打包。打包完成后，在项目根目录下的dist/build/mp-weixin文件夹中会生成小程序代码。打开微信开发者工具，导入该文件夹，进行小程序的预览、调试和发布。在微信开发者工具中，需配置小程序的AppID、项目名称等基本信息，同时根据需要设置服务器域名、合法域名等，确保小程序能正常访问后端接口。
   • H5端：运行npm run build:h5命令进行H5端打包。打包后的文件位于项目根目录下的dist/dev/h5文件夹。可将该文件夹中的内容上传至服务器，通过配置服务器的虚拟主机或静态文件服务，实现H5端的访问。若使用Nginx服务器，需在配置文件中添加对H5文件的访问配置，例如：

server {
    listen       80;
    server_name  your_domain.com;
    location / {
        root   /path/to/h5;
        index  index.html index.htm;
    }
}

• APP端：运行npm run build:app命令进行APP端打包。打包成功后，在项目根目录下的dist/build/app文件夹中会生成APP的安装包。可使用云打包或本地打包的方式生成正式的APP安装文件。云打包可在HBuilderX中进行操作，将打包后的文件上传至应用商店进行发布；本地打包则需要安装相关的SDK和工具，按照官方文档的指引进行操作。

（二）使用HBuilderX部署

1. 环境搭建：下载并安装HBuilderX开发工具，安装完成后打开HBuilderX。在HBuilderX中，依次点击“工具” - “设置”，在弹出的设置窗口中，配置Node.js路径，选择已安装的Node.js 16.20版本的安装目录。
2. 导入项目：点击HBuilderX的“文件”菜单，选择“导入现有项目”，选择小怪兽党建系统UniApp项目文件夹进行导入。导入过程中，HBuilderX会自动检测项目依赖并进行安装。
3. 配置项目：在HBuilderX的项目管理器中，右键点击项目名称，选择“属性”，在弹出的属性窗口中，配置项目的基本信息，如应用名称、包名等。对于小程序端，还需配置微信小程序的AppID；对于APP端，需配置应用的图标、启动页等资源。
4. 打包与发布
   • 小程序端：在HBuilderX的工具栏中，点击“发行” - “小程序-微信”，HBuilderX会自动进行打包并打开微信开发者工具，将打包后的代码导入微信开发者工具进行后续的预览、调试和发布操作。
   • H5端：点击“发行” - “网站-H5手机版”，选择打包的目标路径，HBuilderX会生成H5端的代码。将生成的代码上传至服务器，按照配置H5服务器的方式进行部署。
   • APP端：点击“发行” - “原生App-云打包”，在弹出的云打包窗口中，选择打包类型（正式包或测试包）、证书类型（自有证书或公用证书）等选项，然后点击“打包”按钮。打包完成后，可在HBuilderX的“发行” - “原生App-查看打包结果”中获取APP的安装包，上传至应用商店进行发布。

二、Admin模块部署

（一）依赖安装与配置

进入Admin模块的前端代码目录，在终端中运行npm install命令安装项目所需的依赖包。安装过程中，若遇到依赖包版本冲突或其他问题，可参考项目的官方文档或社区论坛，查找解决方案。部分依赖包可能需要特定的环境变量配置，根据实际情况进行设置。例如，若项目依赖于特定的API接口地址，复制目录下的.env.production.example,更名为.env.production，添加如下配置：

# 请求域名
VITE_APP_BASE_URL='https://your_domain.com'

（二）项目的启动与部署

在终端中运行npm run dev命令启动Admin模块的前端项目。启动成功后，在浏览器中访问http://localhost:5173/admin（默认端口，可在配置文件中修改），查看项目是否正常运行。若项目需要部署到生产环境，运行npm run build命令进行项目打包。打包后的文件位于项目根目录下的dist文件夹中。将dist文件夹中的内容上传至服务器，可使用Nginx、Apache等服务器进行部署。以Nginx为例，在Nginx的配置文件中添加如下配置：

server {
    listen       80;
    server_name  your_domain.com;
    location / {
        root   /path/to/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

配置完成后，重启Nginx服务，即可通过域名访问Admin模块的前端应用。