feat(frontend): Vue 3 + Vite + TS 脚手架 + 构建链 — 重构 Stage 1 (MOC-254)#503
feat(frontend): Vue 3 + Vite + TS 脚手架 + 构建链 — 重构 Stage 1 (MOC-254)#503Cmochance wants to merge 3 commits into
Conversation
前端完全重构第一阶段:搭 Vite 构建链、渲染 hello world、打通 cas:// + CSP + include_dir 嵌入。不迁移业务功能(后续阶段逐页迁)。 - frontend/ 重组为 Vue 项目(package.json / vite.config.ts / tsconfig / env.d.ts / src) - vite modulePreload.polyfill=false + Vue runtime-only → 产物零 inline script, 合规后端 CSP script-src 'self'(已真机验证 .app 正常渲染、无白屏) - tauri.conf.json: frontendDist→../frontend/dist + beforeDevCommand + devUrl (不设 beforeBuildCommand,改由外部显式 npm build,避免 cwd 假设) - static_files.rs: include_dir!→frontend/dist - main.rs: #[cfg(debug_assertions)] dev TCP listener(127.0.0.1:18900), dev 模式 vite proxy /api → 它;release 不编译 - CI(rust-tauri-check) / release(4 平台) / Makefile 加 npm build(cargo 前产 dist); .gitignore 加 frontend/node_modules、dist - assets 迁 frontend/public/;ONBOARDING / README(双语) 前端开发指引更新为 Vue+Vite
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 71f36d599a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
- build.rs 兜底建占位 frontend/dist/index.html: fresh checkout/clean 后 dist gitignored 不存在致 include_dir! 编译期 panic; rerun 收窄到 ../frontend/dist 避免 watch node_modules - main.rs #[cfg(debug_assertions)] navigate 主窗口→vite devUrl: cas:// 自定义协议 不被 build.devUrl 替换, dev 手动导航 window→localhost:1420 启用 HMR - tauri.conf.json beforeDevCommand→`npm run dev`(tauri hooks cwd=frontend 非 repo 根, 原 `--prefix frontend` 解析成 frontend/frontend 致 ENOENT) 验证: fresh cargo check(无 dist)编译通过+占位创建; cargo tauri dev 实测 webview WebKit 进程 ESTABLISHED 连 vite:1420(window 走 vite) + dev listener 18900 LISTEN Refs MOC-254
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 6e1ebe1634
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
- build.rs 占位 dist 只在 PROFILE=debug 创建: release(直接 cargo tauri build)缺真 dist 时让 include_dir! 编译 fail(明确报错), 不静默把"前端未构建"占位页打进 release 包(验证: rm dist 后 release check 报 proc macro panicked, debug check 仍建占位编译过) - tauri.conf.json beforeDevCommand→`npm install && npm run dev`: fresh checkout 无 node_modules 时 npm run dev 找不到 vite binary, 自动装依赖后再启 dev server Refs MOC-254
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: be37fd9f7a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| let index = Path::new("../frontend/dist/index.html"); | ||
| if !index.exists() { | ||
| let _ = std::fs::create_dir_all("../frontend/dist"); | ||
| let _ = std::fs::write( |
There was a problem hiding this comment.
When a developer first runs cargo check or cargo tauri dev, this debug-only fallback writes a real frontend/dist/index.html into the gitignored dist directory. If they later run cargo tauri build directly without npm --prefix frontend run build, the release profile no longer creates the placeholder, but it also does not remove or reject the placeholder that already exists, so include_dir! can still embed the “Frontend not built” page instead of failing. Fresh evidence beyond the earlier thread is that the current fix only gates creation on PROFILE=debug; the generated file persists across the later release build.
Useful? React with 👍 / 👎.
1 participant
前端完全重构第一阶段:把
frontend/从 vanilla JS 重组为 Vue 3 + Vite + TS,打通构建链并渲染 hello world。不迁移业务功能(后续阶段逐页迁)。改动
frontend/→ Vue 项目;vitemodulePreload.polyfill=false+ Vue runtime-only → 产物零 inline script,合规后端 CSPscript-src 'self'tauri.conf.jsonfrontendDist→../frontend/dist+ beforeDevCommand + devUrl;static_files.rsinclude_dir→frontend/distmain.rs#[cfg(debug_assertions)]dev TCP listener(dev 模式 vite proxy/api目标);release 不编译.gitignore加 node_modules/distpublic/;README(双语)/ONBOARDING 前端开发指引更新为 Vue+Vite验证
vue-tsc+vite build产物零 inline script;cargo check(dev listener)通过cargo tauri build出 .app,真机渲染验证通过(无白屏 → CSP / crossorigin×cas:// 全 OK)Refs MOC-254