⁷

代码生成器前端本地运行&部署

leikooo

2025-04-07 17:37

阅读593

leikooo

2025-04-07 17:37

阅读 593

环境准备

代码生成器前端源码
node >= 18 推荐使用 NVM 安装
WebStorm

本地运行

安装依赖

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

用 WebStorm 打开前端源码

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

2、找到 Terminal 选项

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

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

3、执行

▼
shell
复制代码
npm install --force

最后执行效果:

运行前端

找到根目录下的 pakage.json

Run dev 就是正常启动

如果是想要 debug 的话建议可以看看

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

VSCode Debug 官方文档 https://code.visualstudio.com/docs/nodejs/reactjs-tutorial#_debugging-react

启动成功

访问 http://localhost:8000 可以看到

pakage.json

▼
text
复制代码
  "scripts": {
    "dev": "vite",
    "pure-build": "vite build",
    "build": "run-p type-check \"build-only {@}\" --",
    "openapi": "node openapi.config.js",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build",
    "lint": "eslint . --fix",
    "format": "prettier --write src/"
  },

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

修改请求路径

本地运行就修改 src/constants/index.ts 里面的 BACKEND_HOST_LOCAL 修改对应的值变成后端实际运行的地址即可，如果是线上部署就修改 BACKEND_HOST_PROD

本地就使用 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

测试功能

后端需要提前启动可以参考 https://www.codefather.cn/post/1905134703878529025

1、后端执行插入测试 SQL

把 INSERT 语句复制到 Query Console 右键选择「Execute」

完整的 INSERT 语句

▼
sql
复制代码
INSERT INTO my_db.generator (name, description, basePackage, version, author, tags, picture, fileConfig, modelConfig, distPath, status, userId, createTime, updateTime, isDelete) VALUES ( 'acm-template-pro-generator', 'ACM 示例模板生成器', 'com.yupi', '1.0', 'yupi', '["Java"]', 'https://pic.code-nav.cn/migrate_image/f22a0535d56b9513066da1e2ea02fd7c.webp', '{"files":[{"type":"group","condition":"needGit","groupKey":"git","groupName":"开源","files":[{"inputPath":".gitignore","outputPath":".gitignore","type":"file","generateType":"static"},{"inputPath":"README.md","outputPath":"README.md","type":"file","generateType":"static"}]},{"inputPath":"src/com/yupi/acm/MainTemplate.java.ftl","outputPath":"src/com/yupi/acm/MainTemplate.java","type":"file","generateType":"dynamic"}]}', '{"models":[{"fieldName":"needGit","type":"boolean","description":"是否生成 .gitignore 文件","defaultValue":true},{"fieldName":"loop","type":"boolean","description":"是否生成循环","defaultValue":false,"abbr":"l"},{"type":"MainTemplate","description":"用于生成核心模板文件","groupKey":"mainTemplate","groupName":"核心模板","models":[{"fieldName":"author","type":"String","description":"作者注释","defaultValue":"yupi","abbr":"a"},{"fieldName":"outputText","type":"String","description":"输出信息","defaultValue":"sum = ","abbr":"o"}],"condition":"loop"}]}', '/generator_dist/1904820595580289025/7xQuIpqf-acm-template-pro-generator.zip', 0, 1904820595580289025, '2025-03-26 14:24:22', '2025-04-04 17:58:33', 0);

2、创建用户并且在数据库里面把 generator 表里面的 userId 字段改成自己登录 user 的 id 方便后续操作

user 表