vite-plugin-vue icon indicating copy to clipboard operation
vite-plugin-vue copied to clipboard

Use vue built-in components Transition and KeepAlive build product not render content

Open aurora-lch opened this issue 1 year ago • 3 comments

Describe the bug

<KeepAlive include="a"> <Transition mode="out-in"> <component class="h-[calc(100%-3rem)]" :is="Component" /> </Transition> </KeepAlive> use this code, when i build and deploy service. render is normal but keepalive invalidation

<Transition mode="out-in"> <KeepAlive include="a"> <component class="h-[calc(100%-3rem)]" :is="Component" /> </KeepAlive> </Transition> use this code, local dev environment is normal but deploy service, only cached component not render

what i did wrong

Reproduction

https://stackblitz.com/edit/vitejs-vite-22ic9p?file=Demo.vue

Steps to reproduce

<RouterView #default="{ Component }"> <KeepAlive include="a"> <Transition mode="out-in"> <component class="h-[calc(100%-3rem)]" :is="Component" /> </Transition> </KeepAlive> </RouterView> use this code, when i build and deploy service. render is normal but keepalive invalidation

<RouterView #default="{ Component }"> <Transition mode="out-in"> <KeepAlive include="a"> <component class="h-[calc(100%-3rem)]" :is="Component" /> </KeepAlive> </Transition> </RouterView> use this code, local dev environment is normal but deploy service, only cached component not render

what i did wrong

System Info

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M2
    Memory: 255.42 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - /usr/local/bin/node
    Yarn: 1.22.21 - /usr/local/bin/yarn
    npm: 10.2.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 125.0.6422.113
    Safari: 17.4.1
  npmPackages:
    @vitejs/plugin-vue: ^5.0.3 => 5.0.4 
    @vitejs/plugin-vue-jsx: ^3.1.0 => 3.1.0 
    vite: ^5.2.10 => 5.2.10

Used Package Manager

npm

Logs

No response

Validations

aurora-lch avatar May 30 '24 07:05 aurora-lch