环境准备

• 聚合搜索源码
• node >= 18 推荐使用 NVM 安装
• yarn 官方链接 百度网盘 密码：958c
• WebStorm

本地运行

安装依赖

1、使用 WebStorm 打开（VSCode 也是可以的）

用 WebStorm 打开前端源码

回弹出一个是否相信，选择相信即可

2、找到 Terminal 选项

如果没有看到看这里有没有

还是没有的话找到 Settings -> plugins -> Terminal

3、执行

▼
shell
复制代码
npm install --force

启动这个前端需要安装 yarn ，安装包 官方链接 百度网盘 密码：958c

最后执行效果:

运行前端

找到根目录下的 pakage.json

Run dev 就是正常启动，如果是想要 debug 的话建议先 dev 启动然后找到对应的 url 使用快捷键 **Ctrl + Alt + Shift + 点击 url 地址 **即可进入 debug 模式

官方文档： https://www.jetbrains.com/help/webstorm/react.html#react_debug_from_tw

启动成功

pakage.json

▼
text
复制代码
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

1. serve 开发化境启动，会热更新（如果有修改会立刻体现）
2. buid 构建模式，会生成 dist 文件方便前端部署

修改请求路径

修改 baseURL 就是前端请求后端的路径

本地就使用 localhost 部署到服务器上就修改成 IP 或者域名

• http://localhost:8101
• http://192.122.11.11:8101
• http://leikooo.com:8101 域名相当于平替 IP
• http://leikooo.com 没有端口？别慌 http 默认请求80 端口只需要在 Nginx 进行反向代理即可
• https://leikooo.com 和上面的区别？这个是 https 安全的连接，默认端口也变成 443

打包

build 成功

可以看到出现了 dist 目录

如果没有出现 dist 目录，那么就按照下面进行操作一下，就可以看到了

File -> Reload All from Disk

部署

『 前端部署教程（通用） 』