inkreachhub/inkreach-official-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(deploy): production deployment setup and fixes

Browse Source 
- Debian-based api image (bookworm-slim), docker/debian mirrors, prisma
  binaryTargets for openssl 3.0
- nginx: admin SPA under /admin, TLS via acme.sh (ZeroSSL) + auto-renewal
  cron, http->https redirect
- prisma: add origin_goods.delisted migration, sync missing schema
  (good_image/tag_font_color/good_tags), fix users.createdAt Timestamptz
- api: CORS wildcard reflection, helmet CORP cross-origin, price
  backfill in persistProductDetail, categoryIcon ancestor fallback,
  mediaByColor per-color gallery in public goods detail
- admin: /admin base path (vite + router)
- import-data.mjs: udt_name casting, serial sequence advance fix
This commit is contained in:
yeuimu
2026-08-26 14:23:09 +08:00
parent be0b90e68f
commit 6c61a4e871
982 changed files with 74156 additions and 179393 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.agents/skills/vue-debug-guides/reference/async-component-vue-router.md
-109
View File
@@ -1,109 +0,0 @@
# Do Not Use defineAsyncComponent with Vue Router
## Rule
Never use `defineAsyncComponent` when configuring Vue Router route components. Vue Router has its own lazy loading mechanism using dynamic imports directly.
## Why This Matters
Vue Router's lazy loading is specifically designed for route-level code splitting. Using `defineAsyncComponent` for routes adds unnecessary overhead and can cause unexpected behavior with navigation guards, loading states, and route transitions.
## Bad Code
```javascript
import { defineAsyncComponent } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/dashboard',
// WRONG: Don't use defineAsyncComponent here
component: defineAsyncComponent(() =>
import('./views/Dashboard.vue')
)
},
{
path: '/profile',
// WRONG: This also won't work as expected
component: defineAsyncComponent({
loader: () => import('./views/Profile.vue'),
loadingComponent: LoadingSpinner
})
}
]
})
```
## Good Code
```javascript
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/dashboard',
// CORRECT: Use dynamic import directly
component: () => import('./views/Dashboard.vue')
},
{
path: '/profile',
// CORRECT: Simple arrow function with import
component: () => import('./views/Profile.vue')
}
]
})
```
## Handling Loading States with Vue Router
For route-level loading states, use Vue Router's navigation guards or a global loading indicator:
```vue
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const isLoading = ref(false)
router.beforeEach(() => {
isLoading.value = true
})
router.afterEach(() => {
isLoading.value = false
})
</script>
<template>
<LoadingBar v-if="isLoading" />
<RouterView />
</template>
```
## When to Use defineAsyncComponent
Use `defineAsyncComponent` for:
- Components loaded conditionally within a page
- Heavy components that aren't always needed
- Modal dialogs or panels that load on demand
Use Vue Router's lazy loading for:
- Route-level components (views/pages)
- Any component configured in route definitions
## Key Points
1. Vue Router and `defineAsyncComponent` are separate lazy loading mechanisms
2. Route components should use direct dynamic imports: `() => import('./View.vue')`
3. Use navigation guards for route-level loading indicators
4. `defineAsyncComponent` is for component-level lazy loading within pages
## References
- [Vue Router Lazy Loading Routes](https://router.vuejs.org/guide/advanced/lazy-loading.html)
- [Vue.js Async Components Documentation](https://vuejs.org/guide/components/async)