管理端打包部署

一 环境安装

1. 下载WebStorm和Node.js，

• 打开上面链接选择对应操作系统下载。

2. 安装WebStorm

• 全部默认安装即可

3. 安装Node.js

• 全部默认安装即可

4. 下载git并默认安装(如果其他端已安装可忽略)

• 全部默认安装即可

5. 配置Node.js环境变量

• Windows下打开系统属性窗口：右键点击 “此电脑”，选择 “属性”。在弹出的窗口中，点击 “高级系统设置”。
• 打开环境变量窗口：在 “系统属性” 窗口中，点击 “环境变量” 按钮。
• 配置系统变量：
• 在 “系统变量” 区域中，找到 “Path” 变量，选中它并点击 “编辑” 按钮。
• 在 “编辑环境变量” 窗口中，点击 “新建” 按钮，然后输入 Node.js 的安装路径，通常是 C:\Program Files\nodejs。如果你的 Node.js 安装在其他路径，请输入相应的路径。
• 点击 “确定” 保存设置。
• 
• macos请自行百度

二 打包

1. 解压项目文件

• 解压tsq-ui-admin.zip，如果提供的git链接，忽略这步，需要解压后放到全英文路径下，比如e:\workspace\tsq-ui-admin

2. 使用WebStorm打开tsq-ui-admin

• 双击打开WebStorm
• 使用git下载项目或者直接打开项目
• 如果给的是git仓库链接，直接选择克隆仓库
• 如果给的是压缩包，直接打开上一步解压缩的目录
• 

3. 验证Node.js环境

• 在WebStorm中打开命令行，输入node -v，如果正常显示node版本，如v18.20.4，代表配置成功

4. 安装依赖

• 在WebStorm中打开命令行执行命令npm i，时间较长，直到完成

5. 修改配置

• 修改env.local和env.prod中的VITE_BASE_URL为部署好的tsq-server的域名

6. 打包

• 在WebStorm中打开命令行执行命令npm run build:prod，时间较长，直到完成
• 完成后会在项目根目录下生成dist-prod，即可以上传到网站

三 部署

1. 宝塔安装

• 参考宝塔官网安装, 宝塔下载open in new window

2. 安装nginx

• 使用宝塔安装nginx，软件商店-搜索nginx-安装

3. 创建网站

• 登录宝塔

• 新建网站

• 输入域名后，点击确定保存

4.上传dist-prod

• 压缩dist-prod，上传dist-prod.zip

• 进入网站目录

• 删除自动生成的文件

• 上传压缩包

• 解压缩

• 进入解压缩目录

• 选中所有文件，点击剪切

• 回到上一目录，点击粘贴

• 完成

5.修改nginx配置

• 点击网站设置

• 添加配置，添加在access_log上面

    location / {
        try_files $uri $uri/ /index.html;
    }

6.完成，直接使用域名访问网站