### 宝塔面板部署若依前端项目的具体操作 为了使若依前端项目能够在互联网上被访问，在宝塔面板上的部署过程可以分为几个部分来完成。 #### 创建并配置环境 确保已安装必要的运行环境，比如Nginx用于反向代理服务。这一步骤通常在初次设置服务器时已完成[^1]。 #### 打包前端项目 对于若依这样的Vue.js框架构建的应用程序来说，需要先执行`npm run build`命令来进行生产环境下的打包工作。此步骤会生成dist文件夹，其中包含了可直接上线的静态资源文件[^2]。 ```bash cd /path/to/ruoyi-vue/ npm install npm run build ``` #### 登录宝塔面板与添加站点 通过浏览器登录到宝塔面板管理界面，并按照提示输入用户名密码进入控制台。接着点击左侧菜单中的【网站】选项卡，再点击右上方的【添加站点】按钮，填写好相应的域名信息后保存提交即可成功创建一个新的虚拟主机实例。 #### 设置域名解析记录 前往所购买域名的服务商处新增一条A类型的DNS解析记录指向云服务商分配给用户的ECS公网IP地址。等待一段时间让新的DNS变更生效以便后续能正常访问该网址。 #### 文件上传至指定路径 找到之前新建成功的站点名称旁边的三个点图标展开更多操作列表，从中选取最后一项即“ftp/sftp”，获取FTP账户详情页里边有连接方式说明以及默认端口号等重要参数；也可以直接选择右侧栏里的【文件】功能模块浏览远程服务器磁盘结构直至定位到目标位置（通常是/www/wwwroot/${yourdomain}/public_html），最后借助WinSCP之类的工具把本地电脑中编译好的HTML/CSS/JS等素材完整复制过去覆盖原有内容。 #### 修改nginx配置实现单页面应用支持 由于SPA(Single Page Application)特性决定了除了根路由外其他URL均需交由前端自行处理，因此还需要编辑对应站点的Nginx配置文件加入try_files指令确保所有请求都能正确返回index.html入口文档： ```nginx server { listen 80; server_name your.domain.com; location / { root /www/wwwroot/your.domain.com/public_html; index index.html index.htm; try_files $uri $uri/ /index.html; # 支持vue-router模式 } } ``` #### 测试验证成果 当一切准备就绪之后就可以尝试打开浏览器输入完整的HTTP URL看看是否能够顺利加载首页啦！
